diff --git a/package-lock.json b/package-lock.json index 37b64da..afa4b0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "chart.js": "3.3.2", "primeflex": "^3.3.1", "primeicons": "^6.0.1", - "primevue": "3.39.0", + "primevue": "3.49.1", "vue": "^3.2.41", "vue-router": "^4.1.5" }, @@ -36,9 +36,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", "bin": { "parser": "bin/babel-parser.js" }, @@ -423,9 +423,9 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", - "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", "dev": true, "dependencies": { "ajv": "^6.12.4", @@ -446,22 +446,22 @@ } }, "node_modules/@eslint/js": { - "version": "8.52.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.52.0.tgz", - "integrity": "sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==", + "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, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.13", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", - "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==", + "version": "0.11.14", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", + "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", "dev": true, "dependencies": { - "@humanwhocodes/object-schema": "^2.0.1", - "debug": "^4.1.1", + "@humanwhocodes/object-schema": "^2.0.2", + "debug": "^4.3.1", "minimatch": "^3.0.5" }, "engines": { @@ -482,9 +482,9 @@ } }, "node_modules/@humanwhocodes/object-schema": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz", - "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", + "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", "dev": true }, "node_modules/@jridgewell/sourcemap-codec": { @@ -528,9 +528,9 @@ } }, "node_modules/@rushstack/eslint-patch": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", - "integrity": "sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz", + "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==", "dev": true }, "node_modules/@ungap/structured-clone": { @@ -540,68 +540,68 @@ "dev": true }, "node_modules/@vitejs/plugin-vue": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz", - "integrity": "sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz", + "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==", "dev": true, "engines": { "node": "^14.18.0 || >=16.0.0" }, "peerDependencies": { - "vite": "^4.0.0", + "vite": "^4.0.0 || ^5.0.0", "vue": "^3.2.25" } }, "node_modules/@vue/compiler-core": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz", - "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz", + "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==", "dependencies": { - "@babel/parser": "^7.23.0", - "@vue/shared": "3.3.7", + "@babel/parser": "^7.23.9", + "@vue/shared": "3.4.21", + "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.0.2" } }, "node_modules/@vue/compiler-dom": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz", - "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz", + "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==", "dependencies": { - "@vue/compiler-core": "3.3.7", - "@vue/shared": "3.3.7" + "@vue/compiler-core": "3.4.21", + "@vue/shared": "3.4.21" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz", - "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz", + "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==", "dependencies": { - "@babel/parser": "^7.23.0", - "@vue/compiler-core": "3.3.7", - "@vue/compiler-dom": "3.3.7", - "@vue/compiler-ssr": "3.3.7", - "@vue/reactivity-transform": "3.3.7", - "@vue/shared": "3.3.7", + "@babel/parser": "^7.23.9", + "@vue/compiler-core": "3.4.21", + "@vue/compiler-dom": "3.4.21", + "@vue/compiler-ssr": "3.4.21", + "@vue/shared": "3.4.21", "estree-walker": "^2.0.2", - "magic-string": "^0.30.5", - "postcss": "^8.4.31", + "magic-string": "^0.30.7", + "postcss": "^8.4.35", "source-map-js": "^1.0.2" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz", - "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz", + "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==", "dependencies": { - "@vue/compiler-dom": "3.3.7", - "@vue/shared": "3.3.7" + "@vue/compiler-dom": "3.4.21", + "@vue/shared": "3.4.21" } }, "node_modules/@vue/devtools-api": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz", - "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==" + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz", + "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==" }, "node_modules/@vue/eslint-config-prettier": { "version": "7.1.0", @@ -618,65 +618,53 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz", - "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz", + "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==", "dependencies": { - "@vue/shared": "3.3.7" - } - }, - "node_modules/@vue/reactivity-transform": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz", - "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==", - "dependencies": { - "@babel/parser": "^7.23.0", - "@vue/compiler-core": "3.3.7", - "@vue/shared": "3.3.7", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.5" + "@vue/shared": "3.4.21" } }, "node_modules/@vue/runtime-core": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz", - "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz", + "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==", "dependencies": { - "@vue/reactivity": "3.3.7", - "@vue/shared": "3.3.7" + "@vue/reactivity": "3.4.21", + "@vue/shared": "3.4.21" } }, "node_modules/@vue/runtime-dom": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz", - "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz", + "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==", "dependencies": { - "@vue/runtime-core": "3.3.7", - "@vue/shared": "3.3.7", - "csstype": "^3.1.2" + "@vue/runtime-core": "3.4.21", + "@vue/shared": "3.4.21", + "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz", - "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz", + "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==", "dependencies": { - "@vue/compiler-ssr": "3.3.7", - "@vue/shared": "3.3.7" + "@vue/compiler-ssr": "3.4.21", + "@vue/shared": "3.4.21" }, "peerDependencies": { - "vue": "3.3.7" + "vue": "3.4.21" } }, "node_modules/@vue/shared": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz", - "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==" + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz", + "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==" }, "node_modules/acorn": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", - "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -827,16 +815,10 @@ "integrity": "sha512-H0hSO7xqTIrwxoACqnSoNromEMfXvfuVnrbuSt2TuXfBDDofbnto4zuZlRtRvC73/b37q3wGAWZyUU41QPvNbA==" }, "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -849,6 +831,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -916,9 +901,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debug": { "version": "4.3.4", @@ -955,6 +940,17 @@ "node": ">=6.0.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -1005,16 +1001,16 @@ } }, "node_modules/eslint": { - "version": "8.52.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz", - "integrity": "sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==", + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", + "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.2", - "@eslint/js": "8.52.0", - "@humanwhocodes/config-array": "^0.11.13", + "@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", @@ -1093,17 +1089,17 @@ } }, "node_modules/eslint-plugin-vue": { - "version": "9.18.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz", - "integrity": "sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==", + "version": "9.22.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.22.0.tgz", + "integrity": "sha512-7wCXv5zuVnBtZE/74z4yZ0CM8AjH6bk4MQGm7hZjUC2DBppKU5ioeOk5LGSg/s9a1ZJnIsdPLJpXnu1Rc+cVHg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "natural-compare": "^1.4.0", "nth-check": "^2.1.1", - "postcss-selector-parser": "^6.0.13", - "semver": "^7.5.4", - "vue-eslint-parser": "^9.3.1", + "postcss-selector-parser": "^6.0.15", + "semver": "^7.6.0", + "vue-eslint-parser": "^9.4.2", "xml-name-validator": "^4.0.0" }, "engines": { @@ -1230,9 +1226,9 @@ "dev": true }, "node_modules/fastq": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", - "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", + "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", "dev": true, "dependencies": { "reusify": "^1.0.4" @@ -1279,9 +1275,9 @@ } }, "node_modules/flat-cache": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz", - "integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", "dev": true, "dependencies": { "flatted": "^3.2.9", @@ -1289,13 +1285,13 @@ "rimraf": "^3.0.2" }, "engines": { - "node": ">=12.0.0" + "node": "^10.12.0 || >=12.0.0" } }, "node_modules/flatted": { - "version": "3.2.9", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz", - "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, "node_modules/fs.realpath": { @@ -1351,9 +1347,9 @@ } }, "node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -1381,18 +1377,18 @@ } }, "node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "dev": true, "engines": { "node": ">= 4" } }, "node_modules/immutable": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", - "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", "dev": true }, "node_modules/import-fresh": { @@ -1585,9 +1581,9 @@ } }, "node_modules/magic-string": { - "version": "0.30.5", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", - "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", + "version": "0.30.8", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", + "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -1614,9 +1610,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", - "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "funding": [ { "type": "github", @@ -1770,9 +1766,9 @@ } }, "node_modules/postcss": { - "version": "8.4.31", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", - "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", "funding": [ { "type": "opencollective", @@ -1788,7 +1784,7 @@ } ], "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -1797,9 +1793,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.0.15", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", + "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -1856,9 +1852,9 @@ "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==" }, "node_modules/primevue": { - "version": "3.39.0", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.39.0.tgz", - "integrity": "sha512-fDaK/SHijvw5ds3RNs4yzPgVFyA1/RYXxnEshHME1zhn9/HiTxEqa0Wv3obbuwSmRckA4fdGh+lZ8dDd1RJJLQ==", + "version": "3.49.1", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.49.1.tgz", + "integrity": "sha512-OmUTqbKbPB63Zqf7uA49cipDi+Qh+/13AYJPwgvsVsI4QmAKIkeibBwkOgj1CNIFlopfF79YmyBshFUAPqlw9A==", "peerDependencies": { "vue": "^3.0.0" } @@ -1978,9 +1974,9 @@ } }, "node_modules/sass": { - "version": "1.69.5", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", - "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -1995,9 +1991,9 @@ } }, "node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -2132,9 +2128,9 @@ "dev": true }, "node_modules/vite": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", - "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz", + "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -2187,15 +2183,15 @@ } }, "node_modules/vue": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz", - "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==", + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz", + "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==", "dependencies": { - "@vue/compiler-dom": "3.3.7", - "@vue/compiler-sfc": "3.3.7", - "@vue/runtime-dom": "3.3.7", - "@vue/server-renderer": "3.3.7", - "@vue/shared": "3.3.7" + "@vue/compiler-dom": "3.4.21", + "@vue/compiler-sfc": "3.4.21", + "@vue/runtime-dom": "3.4.21", + "@vue/server-renderer": "3.4.21", + "@vue/shared": "3.4.21" }, "peerDependencies": { "typescript": "*" @@ -2207,9 +2203,9 @@ } }, "node_modules/vue-eslint-parser": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz", - "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==", + "version": "9.4.2", + "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz", + "integrity": "sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==", "dev": true, "dependencies": { "debug": "^4.3.4", @@ -2231,11 +2227,11 @@ } }, "node_modules/vue-router": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz", - "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz", + "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==", "dependencies": { - "@vue/devtools-api": "^6.5.0" + "@vue/devtools-api": "^6.5.1" }, "funding": { "url": "https://github.com/sponsors/posva" diff --git a/package.json b/package.json index c16d013..adebbf3 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "chart.js": "3.3.2", "primeflex": "^3.3.1", "primeicons": "^6.0.1", - "primevue": "3.39.0", + "primevue": "3.49.1", "vue": "^3.2.41", "vue-router": "^4.1.5" }, diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index d43ab13..76b577f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(100, 181, 246, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #383838; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64B5F6; background: #64B5F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #64B5F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #64B5F6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #64B5F6; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #43a5f4; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #64B5F6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64B5F6; background: #64B5F6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #64B5F6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #64B5F6; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #383838; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #64B5F6; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } .p-slider .p-slider-range { background: #64B5F6; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #64B5F6; border-color: #64B5F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #64B5F6; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .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; @@ -1684,53 +3004,152 @@ background-color: #383838; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #64B5F6; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #43a5f4; color: #212529; border-color: #43a5f4; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #2396f2; color: #212529; border-color: #2396f2; @@ -1755,12 +3175,12 @@ color: #64B5F6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 181, 246, 0.16); color: #64B5F6; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #64B5F6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(100, 181, 246, 0.16); color: #64B5F6; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #64B5F6; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #64B5F6; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #121212; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 181, 246, 0.04); - color: #64B5F6; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 181, 246, 0.04); - color: #64B5F6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #242424; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #383838; + border-top: 1px solid #383838; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #383838; + border-left: 1px solid #383838; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #383838; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -4023,6 +6957,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #2396f2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #383838; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #383838; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1e1e1e; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #64B5F6; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1e1e1e; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #64B5F6; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64B5F6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #64B5F6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #64B5F6; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index aa0e35a..2320283 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(129, 199, 132, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #383838; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81C784; background: #81C784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #81C784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81C784; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #81C784; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #6abd6e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #81C784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81C784; background: #81C784; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #81C784; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #81C784; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #383838; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #81C784; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } .p-slider .p-slider-range { background: #81C784; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #81C784; border-color: #81C784; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #81C784; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .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; @@ -1684,53 +3004,152 @@ background-color: #383838; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #81C784; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #6abd6e; color: #212529; border-color: #6abd6e; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #54b358; color: #212529; border-color: #54b358; @@ -1755,12 +3175,12 @@ color: #81C784; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 199, 132, 0.16); color: #81C784; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #81C784; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(129, 199, 132, 0.16); color: #81C784; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #81C784; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #81C784; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #121212; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 199, 132, 0.04); - color: #81C784; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 199, 132, 0.04); - color: #81C784; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #242424; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #383838; + border-top: 1px solid #383838; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #383838; + border-left: 1px solid #383838; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #383838; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -4023,6 +6957,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #54b358; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #383838; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #383838; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1e1e1e; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #81C784; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1e1e1e; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81C784; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81C784; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #81C784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #81C784; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index f498d5c..4d8183b 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(255, 213, 79, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #383838; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #FFD54F; background: #FFD54F; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #FFD54F; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #FFD54F; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #FFD54F; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #ffcd2e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #FFD54F; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #FFD54F; background: #FFD54F; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #FFD54F; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #FFD54F; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #383838; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #FFD54F; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } .p-slider .p-slider-range { background: #FFD54F; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #FFD54F; border-color: #FFD54F; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #FFD54F; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .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; @@ -1684,53 +3004,152 @@ background-color: #383838; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #FFD54F; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #ffcd2e; color: #212529; border-color: #ffcd2e; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #ffc50c; color: #212529; border-color: #ffc50c; @@ -1755,12 +3175,12 @@ color: #FFD54F; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 213, 79, 0.16); color: #FFD54F; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #FFD54F; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(255, 213, 79, 0.16); color: #FFD54F; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #FFD54F; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #FFD54F; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #121212; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 213, 79, 0.04); - color: #FFD54F; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 213, 79, 0.04); - color: #FFD54F; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #242424; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #383838; + border-top: 1px solid #383838; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #383838; + border-left: 1px solid #383838; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #383838; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -4023,6 +6957,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #ffc50c; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #383838; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #383838; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1e1e1e; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #FFD54F; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1e1e1e; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFD54F; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #FFD54F; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #FFD54F; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #FFD54F; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index ca804bc..f8a0181 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(186, 104, 200, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #383838; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #BA68C8; background: #BA68C8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #BA68C8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #BA68C8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #BA68C8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #b052c0; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #BA68C8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #BA68C8; background: #BA68C8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #BA68C8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #BA68C8; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #383838; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #BA68C8; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } .p-slider .p-slider-range { background: #BA68C8; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #BA68C8; border-color: #BA68C8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #BA68C8; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .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; @@ -1684,53 +3004,152 @@ background-color: #383838; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #BA68C8; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #b052c0; color: #ffffff; border-color: #b052c0; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #a241b2; color: #ffffff; border-color: #a241b2; @@ -1755,12 +3175,12 @@ color: #BA68C8; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(186, 104, 200, 0.16); color: #BA68C8; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #BA68C8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(186, 104, 200, 0.16); color: #BA68C8; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #BA68C8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #BA68C8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #121212; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(186, 104, 200, 0.04); - color: #BA68C8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(186, 104, 200, 0.04); - color: #BA68C8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #242424; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #383838; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #383838; + border-top: 1px solid #383838; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #383838; + border-left: 1px solid #383838; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #383838; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1e1e1e; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(56, 56, 56, 0); border-bottom-color: #353535; } @@ -4023,6 +6957,159 @@ border-top-color: #383838; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #383838; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #a241b2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1e1e1e; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #383838; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #383838; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1e1e1e; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #BA68C8; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1e1e1e; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #BA68C8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #BA68C8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #BA68C8; color: #ffffff; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/aura-dark-amber/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-amber/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-amber/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-amber/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-amber/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-amber/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css new file mode 100644 index 0000000..c03e26f --- /dev/null +++ b/public/themes/aura-dark-amber/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #fbbf24; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(251, 191, 36, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #fcd34d; + background: #fcd34d; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fcd34d; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fcd34d; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #fbbf24; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #fbbf24; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #fcd34d; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #fcd34d; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #fbbf24; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #fbbf24; + border: 1px solid #fbbf24; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #fcd34d; + color: #020617; + border-color: #fcd34d; + } + .p-button:not(:disabled):active { + background: #fde68a; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #fbbf24; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #fbbf24; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #fbbf24; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #fbbf24; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #fbbf24; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #fbbf24; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #fbbf24; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #fcd34d; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #fbbf24; + background-color: rgba(251, 191, 36, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #fcd34d; + color: #020617; + border-color: #fcd34d; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #fde68a; + color: #020617; + border-color: #fde68a; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #fbbf24; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #fbbf24; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fbbf24; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #fbbf24; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #fbbf24; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #fbbf24; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(251, 191, 36, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(251, 191, 36, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #fbbf24; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #fbbf24; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(250, 183, 8, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(250, 183, 8, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(250, 183, 8, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(250, 183, 8, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #fbbf24; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #fbbf24; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #fddf92; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #fbbf24; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #fbbf24; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #fbbf24; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #fbbf24; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #fbbf24; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #fbbf24; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #fbbf24; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(251, 191, 36, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-blue/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-blue/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-blue/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-blue/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-blue/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-blue/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css new file mode 100644 index 0000000..8d35e30 --- /dev/null +++ b/public/themes/aura-dark-blue/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #60a5fa; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(96, 165, 250, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #93c5fd; + background: #93c5fd; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #93c5fd; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #93c5fd; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #60a5fa; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #60a5fa; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #93c5fd; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #93c5fd; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #60a5fa; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #60a5fa; + border: 1px solid #60a5fa; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #93c5fd; + color: #020617; + border-color: #93c5fd; + } + .p-button:not(:disabled):active { + background: #bfdbfe; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #60a5fa; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #60a5fa; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(96, 165, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #60a5fa; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #60a5fa; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #60a5fa; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #60a5fa; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #60a5fa; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #60a5fa; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #93c5fd; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #60a5fa; + background-color: rgba(96, 165, 250, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #93c5fd; + color: #020617; + border-color: #93c5fd; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #bfdbfe; + color: #020617; + border-color: #bfdbfe; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #60a5fa; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #60a5fa; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #60a5fa; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #60a5fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #60a5fa; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #60a5fa; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(96, 165, 250, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(96, 165, 250, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #60a5fa; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #60a5fa; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(62, 146, 249, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(62, 146, 249, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(62, 146, 249, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(62, 146, 249, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(96, 165, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #60a5fa; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #60a5fa; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #b0d2fd; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #60a5fa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #60a5fa; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #60a5fa; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #60a5fa; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #60a5fa; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #60a5fa; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #60a5fa; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(96, 165, 250, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-cyan/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-cyan/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-cyan/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-cyan/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-cyan/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-cyan/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css new file mode 100644 index 0000000..08e4585 --- /dev/null +++ b/public/themes/aura-dark-cyan/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #22d3ee; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(34, 211, 238, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #67e8f9; + background: #67e8f9; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #67e8f9; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #67e8f9; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #22d3ee; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #22d3ee; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #67e8f9; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #67e8f9; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #22d3ee; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #22d3ee; + border: 1px solid #22d3ee; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #67e8f9; + color: #020617; + border-color: #67e8f9; + } + .p-button:not(:disabled):active { + background: #a5f3fc; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #22d3ee; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #22d3ee; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #22d3ee; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #22d3ee; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #22d3ee; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #22d3ee; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #22d3ee; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #67e8f9; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #22d3ee; + background-color: rgba(34, 211, 238, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #67e8f9; + color: #020617; + border-color: #67e8f9; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #a5f3fc; + color: #020617; + border-color: #a5f3fc; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #22d3ee; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #22d3ee; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #22d3ee; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #22d3ee; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #22d3ee; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #22d3ee; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(34, 211, 238, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(34, 211, 238, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #22d3ee; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #22d3ee; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(17, 200, 227, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(17, 200, 227, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(17, 200, 227, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(17, 200, 227, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #22d3ee; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #22d3ee; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #91e9f7; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #22d3ee; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #22d3ee; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #22d3ee; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #22d3ee; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #22d3ee; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #22d3ee; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #22d3ee; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(34, 211, 238, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-green/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-green/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-green/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-green/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-green/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-green/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css new file mode 100644 index 0000000..2d50813 --- /dev/null +++ b/public/themes/aura-dark-green/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #34d399; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(52, 211, 153, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #6ee7b7; + background: #6ee7b7; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #6ee7b7; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #6ee7b7; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #34d399; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #34d399; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #6ee7b7; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #6ee7b7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #34d399; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #34d399; + border: 1px solid #34d399; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #6ee7b7; + color: #020617; + border-color: #6ee7b7; + } + .p-button:not(:disabled):active { + background: #a7f3d0; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #34d399; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #34d399; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #34d399; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #34d399; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #34d399; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #34d399; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #34d399; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #6ee7b7; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #34d399; + background-color: rgba(52, 211, 153, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #6ee7b7; + color: #020617; + border-color: #6ee7b7; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #a7f3d0; + color: #020617; + border-color: #a7f3d0; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #34d399; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #34d399; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #34d399; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #34d399; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #34d399; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #34d399; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(52, 211, 153, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(52, 211, 153, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #34d399; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #34d399; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(42, 195, 139, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(42, 195, 139, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(42, 195, 139, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(42, 195, 139, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #34d399; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #34d399; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #9ae9cc; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #34d399; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #34d399; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #34d399; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #34d399; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #34d399; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #34d399; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #34d399; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(52, 211, 153, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-indigo/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-indigo/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-indigo/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-indigo/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-indigo/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-indigo/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css new file mode 100644 index 0000000..535eb1d --- /dev/null +++ b/public/themes/aura-dark-indigo/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #818cf8; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(129, 140, 248, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(129, 140, 248, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #a5b4fc; + background: #a5b4fc; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5b4fc; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5b4fc; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #818cf8; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #818cf8; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #a5b4fc; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #a5b4fc; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #818cf8; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #818cf8; + border: 1px solid #818cf8; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #a5b4fc; + color: #020617; + border-color: #a5b4fc; + } + .p-button:not(:disabled):active { + background: #c7d2fe; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #818cf8; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #818cf8; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(129, 140, 248, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #818cf8; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #818cf8; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #818cf8; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #818cf8; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #818cf8; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #818cf8; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #a5b4fc; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #818cf8; + background-color: rgba(129, 140, 248, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #a5b4fc; + color: #020617; + border-color: #a5b4fc; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #c7d2fe; + color: #020617; + border-color: #c7d2fe; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #818cf8; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #818cf8; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #818cf8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #818cf8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #818cf8; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #818cf8; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(129, 140, 248, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(129, 140, 248, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #818cf8; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #818cf8; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(93, 107, 246, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(93, 107, 246, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(93, 107, 246, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(93, 107, 246, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(129, 140, 248, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #818cf8; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #818cf8; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #c0c6fc; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #818cf8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #818cf8; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #818cf8; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #818cf8; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #818cf8; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #818cf8; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #818cf8; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(129, 140, 248, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-lime/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-lime/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-lime/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-lime/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-lime/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-lime/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css new file mode 100644 index 0000000..b410f13 --- /dev/null +++ b/public/themes/aura-dark-lime/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #a3e635; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(163, 230, 53, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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:#fafef5; + --primary-100:#e9f9cf; + --primary-200:#d7f4a8; + --primary-300:#c6f082; + --primary-400:#b4eb5b; + --primary-500:#a3e635; + --primary-600:#8bc42d; + --primary-700:#72a125; + --primary-800:#5a7f1d; + --primary-900:#415c15; +} + +.p-editor-container .p-editor-toolbar { + background: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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: #a3e635; +} +.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: #a3e635; +} +.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: #a3e635; +} +.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: #a3e635; +} + +@layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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: #a3e635; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(163, 230, 53, 0.16); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #a3e635; + background: #a3e635; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #bef264; + background: #bef264; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #a3e635; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bef264; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #a3e635; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bef264; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(163, 230, 53, 0.16); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + border-radius: 50%; + transition-duration: 0.2s; + } + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #a3e635; + } + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + background: #bef264; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(163, 230, 53, 0.16); + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(163, 230, 53, 0.16); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #a3e635; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #a3e635; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #bef264; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #bef264; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #a3e635; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #a3e635; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #a3e635; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #a3e635; + border: 1px solid #a3e635; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #bef264; + color: #020617; + border-color: #bef264; + } + .p-button:not(:disabled):active { + background: #d9f99d; + color: #020617; + border-color: #d9f99d; + } + .p-button.p-button-outlined { + background-color: transparent; + color: #a3e635; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(163, 230, 53, 0.04); + color: #a3e635; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):active { + background: rgba(163, 230, 53, 0.16); + color: #a3e635; + border: 1px solid; + } + .p-button.p-button-outlined.p-button-plain { + color: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button.p-button-text { + background-color: transparent; + color: #a3e635; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):hover { + background: rgba(163, 230, 53, 0.04); + color: #a3e635; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):active { + background: rgba(163, 230, 53, 0.16); + color: #a3e635; + border-color: transparent; + } + .p-button.p-button-text.p-button-plain { + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #a3e635; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: #a3e635; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #a3e635; + 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: #a3e635; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .p-datatable .p-sortable-column.p-highlight { + background: rgba(163, 230, 53, 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:hover { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 rgba(163, 230, 53, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 rgba(163, 230, 53, 0.16); + } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #a3e635; + } + .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: #18181b; + } + .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: #1f1f22; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: rgba(163, 230, 53, 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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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(163, 230, 53, 0.16); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: rgba(92, 138, 17, 0.16); + } + .p-organizationchart .p-organizationchart-line-down { + background: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: rgba(163, 230, 53, 0.16); + border-color: rgba(163, 230, 53, 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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(163, 230, 53, 0.24); + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: rgba(163, 230, 53, 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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 0.16); + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .p-treetable .p-sortable-column.p-highlight { + background: rgba(163, 230, 53, 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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: rgba(163, 230, 53, 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #a3e635; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #a3e635; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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: #a3e635; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + + .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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #a3e635; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #a3e635; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #a3e635; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #bef264; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #a3e635; + background-color: rgba(163, 230, 53, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #bef264; + color: #020617; + border-color: #bef264; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #d9f99d; + color: #020617; + border-color: #d9f99d; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #a3e635; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(163, 230, 53, 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(163, 230, 53, 0.24); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(163, 230, 53, 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(163, 230, 53, 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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #a3e635; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #a3e635; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #a3e635; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #a3e635; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #a3e635; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(163, 230, 53, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(163, 230, 53, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #a3e635; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #a3e635; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #a3e635; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #a3e635; + } + .p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(151, 227, 28, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(151, 227, 28, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(151, 227, 28, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(151, 227, 28, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(163, 230, 53, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #a3e635; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #a3e635; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #d1f39a; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #a3e635; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #a3e635; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #a3e635; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #a3e635; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #a3e635; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #a3e635; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #a3e635; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(163, 230, 53, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-noir/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-noir/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-noir/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-noir/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-noir/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-noir/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css new file mode 100644 index 0000000..8dac6e6 --- /dev/null +++ b/public/themes/aura-dark-noir/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #fafafa; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(250, 250, 250, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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:white; + --primary-100:#fefefe; + --primary-200:#fdfdfd; + --primary-300:#fcfcfc; + --primary-400:#fbfbfb; + --primary-500:#fafafa; + --primary-600:#d5d5d5; + --primary-700:#afafaf; + --primary-800:#8a8a8a; + --primary-900:#646464; +} + +.p-editor-container .p-editor-toolbar { + background: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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: #fafafa; +} +.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: #fafafa; +} +.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: #fafafa; +} +.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: #fafafa; +} + +@layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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: #fafafa; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(250, 250, 250, 0.16); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #fafafa; + background: #fafafa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #f4f4f5; + background: #f4f4f5; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #fafafa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #f4f4f5; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #fafafa; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #f4f4f5; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(250, 250, 250, 0.16); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + border-radius: 50%; + transition-duration: 0.2s; + } + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #fafafa; + } + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + background: #f4f4f5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(250, 250, 250, 0.16); + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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(250, 250, 250, 0.16); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #fafafa; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #fafafa; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #f4f4f5; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #f4f4f5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #fafafa; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #fafafa; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #fafafa; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #fafafa; + border: 1px solid #fafafa; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #f4f4f5; + color: #020617; + border-color: #f4f4f5; + } + .p-button:not(:disabled):active { + background: #e4e4e7; + color: #020617; + border-color: #e4e4e7; + } + .p-button.p-button-outlined { + background-color: transparent; + color: #fafafa; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(250, 250, 250, 0.04); + color: #fafafa; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):active { + background: rgba(250, 250, 250, 0.16); + color: #fafafa; + border: 1px solid; + } + .p-button.p-button-outlined.p-button-plain { + color: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button.p-button-text { + background-color: transparent; + color: #fafafa; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):hover { + background: rgba(250, 250, 250, 0.04); + color: #fafafa; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):active { + background: rgba(250, 250, 250, 0.16); + color: #fafafa; + border-color: transparent; + } + .p-button.p-button-text.p-button-plain { + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #fafafa; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: #fafafa; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #fafafa; + 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: #fafafa; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .p-datatable .p-sortable-column.p-highlight { + background: rgba(250, 250, 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:hover { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 rgba(250, 250, 250, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 rgba(250, 250, 250, 0.16); + } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + 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: #18181b; + } + .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: #1f1f22; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: rgba(250, 250, 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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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(250, 250, 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: rgba(186, 186, 186, 0.16); + } + .p-organizationchart .p-organizationchart-line-down { + background: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: rgba(250, 250, 250, 0.16); + border-color: rgba(250, 250, 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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(250, 250, 250, 0.24); + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: rgba(250, 250, 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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 250, 0.16); + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .p-treetable .p-sortable-column.p-highlight { + background: rgba(250, 250, 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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: rgba(250, 250, 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #fafafa; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #fafafa; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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: #fafafa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + + .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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #fafafa; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #fafafa; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #fafafa; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #f4f4f5; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #fafafa; + background-color: rgba(250, 250, 250, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #f4f4f5; + color: #020617; + border-color: #f4f4f5; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #e4e4e7; + color: #020617; + border-color: #e4e4e7; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #fafafa; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: rgba(255, 255, 255, 0.87); + background: rgba(250, 250, 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(250, 250, 250, 0.24); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(250, 250, 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(250, 250, 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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #fafafa; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fafafa; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #fafafa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #fafafa; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #fafafa; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(250, 250, 250, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(250, 250, 250, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #fafafa; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #fafafa; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #fafafa; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #fafafa; + } + .p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(225, 225, 225, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(225, 225, 225, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(225, 225, 225, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(225, 225, 225, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(250, 250, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #fafafa; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #fafafa; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #fdfdfd; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #fafafa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #fafafa; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #fafafa; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #fafafa; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #fafafa; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #fafafa; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #fafafa; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(250, 250, 250, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-pink/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-pink/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-pink/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-pink/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-pink/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-pink/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css new file mode 100644 index 0000000..bcccc67 --- /dev/null +++ b/public/themes/aura-dark-pink/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #f472b6; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(244, 114, 182, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #f9a8d4; + background: #f9a8d4; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #f9a8d4; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #f9a8d4; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #f472b6; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #f472b6; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #f9a8d4; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #f9a8d4; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #f472b6; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #f472b6; + border: 1px solid #f472b6; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #f9a8d4; + color: #020617; + border-color: #f9a8d4; + } + .p-button:not(:disabled):active { + background: #fbcfe8; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #f472b6; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #f472b6; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #f472b6; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #f472b6; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #f472b6; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #f472b6; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #f472b6; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #f9a8d4; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #f472b6; + background-color: rgba(244, 114, 182, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #f9a8d4; + color: #020617; + border-color: #f9a8d4; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #fbcfe8; + color: #020617; + border-color: #fbcfe8; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #f472b6; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #f472b6; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f472b6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f472b6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #f472b6; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #f472b6; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(244, 114, 182, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(244, 114, 182, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #f472b6; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #f472b6; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(241, 81, 165, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(241, 81, 165, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(241, 81, 165, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(241, 81, 165, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #f472b6; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #f472b6; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #fab9db; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #f472b6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #f472b6; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #f472b6; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #f472b6; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #f472b6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #f472b6; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #f472b6; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(244, 114, 182, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-purple/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-purple/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-purple/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-purple/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-purple/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-purple/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css new file mode 100644 index 0000000..2784f8b --- /dev/null +++ b/public/themes/aura-dark-purple/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #a78bfa; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(167, 139, 250, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(167, 139, 250, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #c4b5fd; + background: #c4b5fd; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c4b5fd; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c4b5fd; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #a78bfa; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #a78bfa; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #c4b5fd; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #c4b5fd; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #a78bfa; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #a78bfa; + border: 1px solid #a78bfa; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #c4b5fd; + color: #020617; + border-color: #c4b5fd; + } + .p-button:not(:disabled):active { + background: #ddd6fe; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #a78bfa; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #a78bfa; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(167, 139, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #a78bfa; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #a78bfa; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #a78bfa; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #a78bfa; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #a78bfa; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #a78bfa; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #c4b5fd; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #a78bfa; + background-color: rgba(167, 139, 250, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #c4b5fd; + color: #020617; + border-color: #c4b5fd; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #ddd6fe; + color: #020617; + border-color: #ddd6fe; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #a78bfa; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #a78bfa; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #a78bfa; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #a78bfa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #a78bfa; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #a78bfa; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(167, 139, 250, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(167, 139, 250, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #a78bfa; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #a78bfa; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(139, 102, 248, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(139, 102, 248, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(139, 102, 248, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(139, 102, 248, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(167, 139, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #a78bfa; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #a78bfa; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #d3c5fd; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #a78bfa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #a78bfa; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #a78bfa; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #a78bfa; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #a78bfa; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #a78bfa; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #a78bfa; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(167, 139, 250, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-dark-teal/fonts/Inter-italic.var.woff2 b/public/themes/aura-dark-teal/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-dark-teal/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-dark-teal/fonts/Inter-roman.var.woff2 b/public/themes/aura-dark-teal/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-dark-teal/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css new file mode 100644 index 0000000..70e54bf --- /dev/null +++ b/public/themes/aura-dark-teal/theme.css @@ -0,0 +1,12113 @@ +: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"; + --text-color: #ffffff; + --text-color-secondary: #a1a1aa; + --primary-color: #2dd4bf; + --primary-color-text: #020617; + --surface-0: #18181b; + --surface-50: #27272a; + --surface-100: #3f3f46; + --surface-200: #52525b; + --surface-300: #71717a; + --surface-400: #a1a1aa; + --surface-500: #d4d4d8; + --surface-600: #e4e4e7; + --surface-700: #f4f4f5; + --surface-800: #fafafa; + --surface-900: #ffffff; + --gray-0: #ffffff; + --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.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #09090b; + --surface-section: #18181b; + --surface-card: #18181b; + --surface-overlay: #18181b; + --surface-border: #27272a; + --surface-hover: rgba(255, 255, 255, 0.03); + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: rgba(45, 212, 191, 0.16); + --highlight-text-color: rgba(255, 255, 255, 0.87); + --p-anchor-gutter: 2px; + color-scheme: dark; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #18181b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3f3f46; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #a1a1aa; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #ffffff; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #ffffff; + 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 0.75rem; +} +.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 #3f3f46; +} +.p-editor-container .p-editor-content .ql-editor { + background: #09090b; + color: #ffffff; + 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: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #ffffff; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #ffffff; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #fca5a5; + } + + .p-text-secondary { + color: #a1a1aa; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #52525b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-autocomplete-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(45, 212, 191, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + + .p-datepicker { + padding: 0.75rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #ffffff; + background: transparent; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #3f3f46; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #3f3f46; + color: #ffffff; + 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: 0.5rem 0 0 0; + border-top: 1px solid #3f3f46; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #3f3f46; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #3f3f46; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-cascadeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #020617; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #52525b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #5eead4; + background: #5eead4; + color: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #fca5a5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5eead4; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #27272a; + } + .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: #27272a; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5eead4; + } + + .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: #52525b; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .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: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3f3f46; + color: #ffffff; + } + .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: #ffffff; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .p-colorpicker-panel { + background: #18181b; + border: 1px solid #3f3f46; + } + .p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; + } + + .p-colorpicker-overlay-panel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #52525b; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-dropdown.p-variant-filled { + background: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .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: #a1a1aa; + } + .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: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #a1a1aa; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-dropdown-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #18181b; + color: #a1a1aa; + border-top: 1px solid #3f3f46; + border-left: 1px solid #3f3f46; + border-bottom: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #3f3f46; + } + + .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.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: #a1a1aa; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #a1a1aa; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #27272a; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #a1a1aa; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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: #020617; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #27272a; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #ffffff; + background: #09090b; + padding: 0.5rem 0.75rem; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #52525b; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-inputtext.p-invalid.p-component { + border-color: #fca5a5; + } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } + .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: #a1a1aa; + 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: #a1a1aa; + } + + :-moz-placeholder { + color: #a1a1aa; + } + + ::-moz-placeholder { + color: #a1a1aa; + } + + :-ms-input-placeholder { + color: #a1a1aa; + } + + .p-input-filled .p-inputtext { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #27272a; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #27272a; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #ffffff; + 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-listbox.p-invalid { + border-color: #fca5a5; + } + + .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: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + 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: #a1a1aa; + width: 2.5rem; + 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.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 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: #a1a1aa; + } + .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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ffffff; + 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.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3f3f46; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .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: 1.25rem; + height: 1.25rem; + } + .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 #3f3f46; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #3f3f46; + background: #09090b; + width: 1.25rem; + height: 1.25rem; + color: #ffffff; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #2dd4bf; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #2dd4bf; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #52525b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #5eead4; + background: #020617; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #5eead4; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #fca5a5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #020617; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #27272a; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #020617; + } + + .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: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #3f3f46; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #3f3f46; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #2dd4bf; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #3f3f46; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #09090b; + border: 1px solid #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #52525b; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-treeselect.p-variant-filled { + background: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #a1a1aa; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #3f3f46; + color: #ffffff; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #a1a1aa; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #fca5a5; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #ffffff; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #27272a; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #27272a; + } + + .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 #09090b; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #09090b; + border: 1px solid #09090b; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #a1a1aa; + } + .p-togglebutton.p-highlight .p-button { + background: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: #09090b; + border-color: #09090b; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #020617; + background: #2dd4bf; + border: 1px solid #2dd4bf; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #5eead4; + color: #020617; + border-color: #5eead4; + } + .p-button:not(:disabled):active { + background: #99f6e4; + color: #020617; + 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: #a1a1aa; + border-color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .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: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #a1a1aa; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #2dd4bf; + background-color: #020617; + } + .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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .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 { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .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 { + 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 { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + .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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.16); + color: #27272a; + 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 { + background-color: transparent; + color: #27272a; + 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 { + background: rgba(39, 39, 42, 0.04); + border-color: transparent; + color: #27272a; + } + .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 { + background: rgba(39, 39, 42, 0.16); + border-color: transparent; + color: #27272a; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #09090b; + 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: #f4f4f5; + color: #09090b; + border-color: #f4f4f5; + } + .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: #e4e4e7; + color: #09090b; + border-color: #e4e4e7; + } + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #2dd4bf; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #3f3f46; + color: #a1a1aa; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #3f3f46; + color: #ffffff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3f3f46; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #3f3f46; + } + .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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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:hover { + background: rgba(45, 212, 191, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-datatable .p-column-resizer-helper { + background: #2dd4bf; + } + .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: #18181b; + } + .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: #1f1f22; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #18181b; + color: #ffffff; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #ffffff; + 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: #ffffff; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #ffffff; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #ffffff; + background: #18181b; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #3f3f46; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-orderlist .p-orderlist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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: #1f1f22; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .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: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3f3f46; + border-color: #3f3f46; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #18181b; + color: #ffffff; + border: solid #3f3f46; + 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: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: #ffffff; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #a1a1aa; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .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: #ffffff; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #18181b; + border: 1px solid #3f3f46; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-picklist .p-picklist-header { + color: #ffffff; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #ffffff; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #3f3f46; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #ffffff; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1f1f22; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #3f3f46; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-connector { + background-color: #3f3f46; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #a1a1aa; + } + .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: #ffffff; + } + .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: #ffffff; + } + .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: #a1a1aa; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #18181b; + color: #ffffff; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + font-weight: 600; + color: #ffffff; + background: #18181b; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #a1a1aa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + 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: #ffffff; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #ffffff; + } + .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: #18181b; + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #27272a; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #ffffff; + } + .p-treetable .p-column-resizer-helper { + background: #2dd4bf; + } + .p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #18181b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #a1a1aa; + background: #18181b; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #18181b; + color: #ffffff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #a1a1aa; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + background: #18181b; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #ffffff; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3f3f46; + color: #ffffff; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .p-divider .p-divider-content { + background-color: #18181b; + } + .p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; + } + .p-divider.p-divider-horizontal:before { + border-top: 1px solid #3f3f46; + } + .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 solid #3f3f46; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #3f3f46; + padding: 1.125rem; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + background: #18181b; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #3f3f46; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #3f3f46; + background: #18181b; + border-radius: 6px; + color: #ffffff; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #3f3f46; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3f3f46; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #3f3f46; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + border-width: 2px; + background: #18181b; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #ffffff; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ffffff; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #2dd4bf; + } + .p-stepper .p-stepper-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #ffffff; + } + .p-stepper .p-stepper-separator { + background-color: #3f3f46; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #18181b; + color: #ffffff; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #18181b; + border-color: #3f3f46; + color: #2dd4bf; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #18181b; + color: #2dd4bf; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #18181b; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #18181b; + border: 1px solid #3f3f46; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #18181b; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3f3f46; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #3f3f46; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #18181b; + color: #ffffff; + 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: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 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: #18181b; + color: #ffffff; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #2dd4bf; + color: #020617; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #5eead4; + color: #020617; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(24, 24, 27, 0); + border-bottom-color: #18181b; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(63, 63, 70, 0); + border-bottom-color: #3c3c43; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #18181b; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3f3f46; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #ffffff; + 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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #3f3f46; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #18181b; + padding: 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #18181b; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #3f3f46; + color: #ffffff; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #2dd4bf; + background-color: rgba(45, 212, 191, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #3f3f46; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #5eead4; + color: #020617; + border-color: #5eead4; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #99f6e4; + color: #020617; + border-color: #99f6e4; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #18181b; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #71717a; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #ffffff; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #71717a; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-megamenu-panel { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #ffffff; + } + .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: #ffffff; + 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: #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-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: #ffffff; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menu.p-menu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #71717a; + background: #18181b; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #71717a; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #a1a1aa; + background: #18181b; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #a1a1aa; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #18181b; + border-color: #18181b; + 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: #18181b; + background: #18181b; + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #18181b; + color: #ffffff; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + 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 .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + 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:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .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 #3f3f46; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #18181b; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #a1a1aa; + border: 1px solid #3f3f46; + background: #18181b; + 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: #ffffff; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #ffffff; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3f3f46; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #18181b; + border: 1px solid #3f3f46; + 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 #3f3f46; + border-width: 0 0 1px 0; + border-color: transparent transparent #3f3f46 transparent; + background: #18181b; + color: #a1a1aa; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #ffffff; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #18181b; + border-color: #3f3f46; + color: #2dd4bf; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #18181b; + border: 1px solid #3f3f46; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #ffffff; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: 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: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.03); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #ffffff; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #ffffff; + 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: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #3f3f46; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + color: #3b82f6; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #3b82f6; + } + .p-inline-message.p-inline-message-success { + background: rgba(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #22c55e; + } + .p-inline-message.p-inline-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #eab308; + } + .p-inline-message.p-inline-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ef4444; + } + .p-inline-message.p-inline-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #d4d4d8; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #09090b; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .p-message.p-message-success .p-message-icon { + color: #22c55e; + } + .p-message.p-message-success .p-message-close { + color: #22c55e; + } + .p-message.p-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .p-message.p-message-warn .p-message-icon { + color: #eab308; + } + .p-message.p-message-warn .p-message-close { + color: #eab308; + } + .p-message.p-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .p-message.p-message-error .p-message-icon { + color: #ef4444; + } + .p-message.p-message-error .p-message-close { + color: #ef4444; + } + .p-message.p-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-icon { + color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close { + color: #d4d4d8; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-message.p-message-contrast .p-message-icon { + color: #09090b; + } + .p-message.p-message-contrast .p-message-close { + color: #09090b; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(59, 130, 246, 0.16); + border: solid rgba(29, 78, 216, 0.36); + border-width: 1px; + 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(34, 197, 94, 0.16); + border: solid rgba(21, 128, 61, 0.36); + border-width: 1px; + color: #22c55e; + } + .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: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(234, 179, 8, 0.16); + border: solid rgba(161, 98, 7, 0.36); + border-width: 1px; + color: #eab308; + } + .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: #eab308; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(239, 68, 68, 0.16); + border: solid rgba(185, 28, 28, 0.36); + border-width: 1px; + color: #ef4444; + } + .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: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #27272a; + border: solid #3f3f46; + border-width: 1px; + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #d4d4d8; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #f4f4f5; + border-width: 1px; + color: #09090b; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #09090b; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #a1a1aa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3f3f46; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #3f3f46; + } + .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: #a1a1aa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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.03); + color: #ffffff; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #a1a1aa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.03); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #3f3f46; + 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-group .p-avatar { + border: 2px solid #18181b; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #2dd4bf; + color: #020617; + 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: #27272a; + color: #d4d4d8; + } + .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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #3f3f46; + color: #ffffff; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f3f46; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2dd4bf; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #2dd4bf; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #3f3f46; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #2dd4bf; + } + .p-progressbar .p-progressbar-label { + color: #020617; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ef4444; + 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: #ef4444; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #22c55e; + } + 80%, 90% { + stroke: #eab308; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-scrolltop.p-link { + background: #3f3f46; + } + .p-scrolltop.p-link:hover { + background: #3f3f46; + } + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .p-tag { + background: #2dd4bf; + color: #020617; + 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-secondary { + background-color: #27272a; + color: #d4d4d8; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #09090b; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #18181b; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #27272a; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #4ade80; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #38bdf8; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #fb923c; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #c084fc; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #f87171; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #ffffff; + } + .p-button.p-button-outlined { + border-color: rgba(45, 212, 191, 0.44); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: rgba(45, 212, 191, 0.44); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: rgba(82, 82, 91, 0.48); + color: #a1a1aa; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #a1a1aa; + background-color: rgba(255, 255, 255, 0.16); + border-color: rgba(82, 82, 91, 0.48); + } + .p-button.p-button-outlined.p-button-success { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: rgba(21, 128, 61, 0.44); + } + .p-button.p-button-outlined.p-button-info { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: rgba(29, 78, 216, 0.44); + } + .p-button.p-button-outlined.p-button-warning { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: rgba(161, 98, 7, 0.44); + } + .p-button.p-button-outlined.p-button-help { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: rgba(109, 40, 217, 0.44); + } + .p-button.p-button-outlined.p-button-danger { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: rgba(185, 28, 28, 0.44); + } + .p-button.p-button-outlined.p-button-contrast { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: rgba(255, 255, 255, 0.44); + } + .p-button.p-button-secondary.p-button-text { + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background-color: rgba(255, 255, 255, 0.04); + color: #a1a1aa; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background-color: rgba(255, 255, 255, 0.16); + color: #a1a1aa; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #2dd4bf; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + background-color: #3f3f46; + color: #a1a1aa; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #2dd4bf; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #3f3f46; + border: 1px solid #3f3f46; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #a1a1aa; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #3f3f46; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(39, 192, 173, 0.16); + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(39, 192, 173, 0.16); + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #18181b; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #a1a1aa; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: rgba(39, 192, 173, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: rgba(39, 192, 173, 0.16); + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: rgba(45, 212, 191, 0.16); + color: rgba(255, 255, 255, 0.87); + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #a1a1aa; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: rgba(255, 255, 255, 0.03); + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #2dd4bf; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(10px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #3f3f46; + color: #a1a1aa; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: rgba(255, 255, 255, 0.03); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: rgba(255, 255, 255, 0.08); + color: #ffffff; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #fca5a5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #18181b; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #3f3f46; + color: #a1a1aa; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #a1a1aa; + } + + .p-message { + backdrop-filter: blur(10px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #3b82f6; + } + .p-message.p-message-info .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #22c55e; + } + .p-message.p-message-success .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #eab308; + } + .p-message.p-message-warn .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #ef4444; + } + .p-message.p-message-error .p-message-close:hover { + background: rgba(255, 255, 255, 0.05); + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #d4d4d8; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #3f3f46; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #09090b; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #f4f4f5; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #a1a1aa; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: rgba(255, 255, 255, 0.08); + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #ffffff; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #71717a; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: rgba(255, 255, 255, 0.03); + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #ffffff; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + /*line-height: 1.5;*/ + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #3f3f46; + border-radius: 6px; + } + + .p-password-panel { + background-color: #18181b; + border: 1px solid #3f3f46; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #3f3f46; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength.weak { + background: #f87171; + } + .p-password-panel .p-password-meter .p-password-strength.medium { + background: #fbbf24; + } + .p-password-panel .p-password-meter .p-password-strength.strong { + background: #4ade80; + } + + .p-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-orderlist .p-orderlist-header { + background: #18181b; + color: #ffffff; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #3f3f46; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #3f3f46; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #a1a1aa; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #ffffff; + border-color: transparent; + background: rgba(255, 255, 255, 0.03); + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #3f3f46; + border-radius: 6px; + background-color: #18181b; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #d4d4d8; + background: #27272a; + border: 1px solid #27272a; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #3f3f46; + color: #d4d4d8; + border-color: #3f3f46; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #52525b; + color: #d4d4d8; + border-color: #52525b; + } + + .p-picklist .p-picklist-header { + background: #18181b; + color: #ffffff; + border: 1px solid #3f3f46; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #a1a1aa; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #3f3f46; + border: 0 none; + background: #18181b; + color: #ffffff; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #2dd4bf; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #3f3f46; + background-color: #3f3f46; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #a1a1aa; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #52525b; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #71717a; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #fca5a5; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #09090b; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #71717a; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #09090b; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #09090b, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #96eadf; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #18181b; + color: #2dd4bf; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #2dd4bf; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #18181b; + color: #2dd4bf; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #2dd4bf; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #2dd4bf; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #2dd4bf; + transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #a1a1aa; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(24, 24, 27, 0.5); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #ffffff; + } + + .p-tag { + background: color-mix(in srgb, var(--primary-500), transparent 80%); + color: var(--primary-300); + } + .p-tag.p-tag-success { + background: rgba(34, 197, 94, 0.16); + color: #22c55e; + } + .p-tag.p-tag-info { + background: rgba(59, 130, 246, 0.16); + color: #3b82f6; + } + .p-tag.p-tag-warning { + background: rgba(234, 179, 8, 0.16); + color: #eab308; + } + .p-tag.p-tag-danger { + background: rgba(239, 68, 68, 0.16); + color: #ef4444; + } + + .p-terminal { + background: #09090b; + color: #ffffff; + border: 1px solid #3f3f46; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #2dd4bf; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(10px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #3b82f6; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #22c55e; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #eab308; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.075); + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.05); + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #3f3f46; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #ef4444; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #f4f4f5; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #27272a; + border-color: #27272a; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #71717a; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #71717a; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: rgba(45, 212, 191, 0.16); + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #3f3f46; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #a1a1aa; + } +} diff --git a/public/themes/aura-light-amber/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-amber/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-amber/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-amber/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-amber/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-amber/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css new file mode 100644 index 0000000..ffc1c26 --- /dev/null +++ b/public/themes/aura-light-amber/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #f59e0b; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #fffbeb; + --highlight-text-color: #b45309; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #b45309; + background: #fffbeb; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #b45309; + background: #fffbeb; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #b45309; + background: #fffbeb; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #d97706; + background: #d97706; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #d97706; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #d97706; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #f59e0b; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #f59e0b; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #d97706; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #d97706; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #f59e0b; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #f59e0b; + border: 1px solid #f59e0b; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #d97706; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #d97706; + 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: #d97706; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #fffbeb; + color: #b45309; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #b45309; + background: #fffbeb; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #fffbeb; + color: #b45309; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #b45309; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #f59e0b; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #b45309; + background: #fffbeb; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #f59e0b; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #f59e0b; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #f59e0b; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #f59e0b; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #d97706; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #f59e0b; + background-color: #fffbeb; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #d97706; + color: #ffffff; + border-color: #d97706; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #b45309; + color: #ffffff; + border-color: #b45309; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #f59e0b; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f59e0b; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f59e0b; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #f59e0b; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #f59e0b; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #fff1ba; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #fff1ba; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #fff1ba; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #fff1ba; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #fffbeb; + color: #b45309; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #f59e0b; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #f59e0b; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #facf85; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #f59e0b; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #f59e0b; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #f59e0b; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #f59e0b; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #f59e0b; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #f59e0b; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #f59e0b; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #fffbeb; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-blue/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-blue/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-blue/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-blue/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-blue/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-blue/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css new file mode 100644 index 0000000..8c26a29 --- /dev/null +++ b/public/themes/aura-light-blue/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #3B82F6; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EFF6FF; + --highlight-text-color: #1D4ED8; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #1D4ED8; + background: #EFF6FF; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #1D4ED8; + background: #EFF6FF; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #1D4ED8; + background: #EFF6FF; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #2563eb; + background: #2563eb; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2563eb; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2563eb; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #3B82F6; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #3B82F6; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #2563eb; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #2563eb; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #3B82F6; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #3B82F6; + border: 1px solid #3B82F6; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #2563eb; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #2563eb; + 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: #2563eb; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #EFF6FF; + color: #1D4ED8; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #1D4ED8; + background: #EFF6FF; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #EFF6FF; + color: #1D4ED8; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #1D4ED8; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #3B82F6; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #1D4ED8; + background: #EFF6FF; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #3B82F6; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #3B82F6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #3B82F6; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #3B82F6; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #3B82F6; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #2563eb; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #3B82F6; + background-color: #EFF6FF; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #2563eb; + color: #ffffff; + border-color: #2563eb; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #1D4ED8; + color: #ffffff; + border-color: #1D4ED8; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #3B82F6; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3B82F6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #3B82F6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #3B82F6; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #3B82F6; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bedaff; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #bedaff; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bedaff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #bedaff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #EFF6FF; + color: #1D4ED8; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #3B82F6; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #3B82F6; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #9dc1fb; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #3B82F6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #3B82F6; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #3B82F6; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #3B82F6; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #3B82F6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #3B82F6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #3B82F6; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #EFF6FF; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-cyan/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-cyan/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-cyan/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-cyan/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-cyan/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-cyan/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css new file mode 100644 index 0000000..d16bc33 --- /dev/null +++ b/public/themes/aura-light-cyan/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #06b6d4; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #ecfeff; + --highlight-text-color: #0e7490; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #0e7490; + background: #ecfeff; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #0e7490; + background: #ecfeff; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #0e7490; + background: #ecfeff; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #0891b2; + background: #0891b2; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0891b2; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0891b2; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #06b6d4; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #06b6d4; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #0891b2; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #0891b2; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #06b6d4; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #06b6d4; + border: 1px solid #06b6d4; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #0891b2; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #0891b2; + 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: #0891b2; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #ecfeff; + color: #0e7490; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #0e7490; + background: #ecfeff; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #ecfeff; + color: #0e7490; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #0e7490; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #06b6d4; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #0e7490; + background: #ecfeff; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #06b6d4; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #06b6d4; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #06b6d4; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #06b6d4; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #0891b2; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #06b6d4; + background-color: #ecfeff; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #0891b2; + color: #ffffff; + border-color: #0891b2; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #0e7490; + color: #ffffff; + border-color: #0e7490; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #06b6d4; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #06b6d4; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #06b6d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #06b6d4; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #06b6d4; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bbfbff; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #bbfbff; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bbfbff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #bbfbff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #ecfeff; + color: #0e7490; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #06b6d4; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #06b6d4; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #71e7fb; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #06b6d4; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #06b6d4; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #06b6d4; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #06b6d4; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #06b6d4; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #06b6d4; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #06b6d4; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #ecfeff; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-green/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-green/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-green/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-green/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-green/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-green/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css new file mode 100644 index 0000000..c98e9e1 --- /dev/null +++ b/public/themes/aura-light-green/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #10b981; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #ecfdf5; + --highlight-text-color: #047857; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ecfdf5; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #059669; + background: #059669; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #059669; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #059669; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ecfdf5; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ecfdf5; + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #ecfdf5; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #10b981; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #10b981; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #059669; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #059669; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #10b981; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #10b981; + border: 1px solid #10b981; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #059669; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #059669; + 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: #059669; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #ecfdf5; + color: #047857; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #047857; + background: #ecfdf5; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-datatable .p-sortable-column.p-highlight { + background: #ecfdf5; + color: #047857; + } + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #047857; + } + .p-datatable .p-sortable-column.p-highlight:hover { + background: #ecfdf5; + color: #047857; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #047857; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: #ecfdf5; + color: #047857; + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #ecfdf5; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #ecfdf5; + } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #10b981; + } + .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: #f8fafc; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #ecfdf5; + 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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #ecfdf5; + color: #047857; + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #ecfdf5; + color: #047857; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #79f1b8; + } + .p-organizationchart .p-organizationchart-line-down { + background: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #ecfdf5; + border-color: #ecfdf5; + color: #047857; + } + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #047857; + background: #ecfdf5; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #d1fae5; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #ecfdf5; + 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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #047857; + background: #ecfdf5; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-treetable .p-sortable-column.p-highlight { + background: #ecfdf5; + color: #047857; + } + .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #047857; + } + .p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: #ecfdf5; + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #10b981; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ecfdf5; + color: #047857; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #10b981; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #10b981; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #10b981; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #059669; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #10b981; + background-color: #ecfdf5; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #059669; + color: #ffffff; + border-color: #059669; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #047857; + color: #ffffff; + border-color: #047857; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ecfdf5; + color: #047857; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #10b981; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #047857; + background: #ecfdf5; + } + .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: #d1fae5; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #ecfdf5; + 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: #ecfdf5; + 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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #10b981; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #10b981; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #10b981; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #10b981; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #c0f8de; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #c0f8de; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #c0f8de; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #c0f8de; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #ecfdf5; + color: #047857; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #10b981; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #10b981; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #71f3c8; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #10b981; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #10b981; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #10b981; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #10b981; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #10b981; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #10b981; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #10b981; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #ecfdf5; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-indigo/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-indigo/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-indigo/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-indigo/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-indigo/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-indigo/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css new file mode 100644 index 0000000..067d897 --- /dev/null +++ b/public/themes/aura-light-indigo/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #6366F1; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #EEF2FF; + --highlight-text-color: #4338CA; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #4338CA; + background: #EEF2FF; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: #E0E7FF; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #4338CA; + background: #EEF2FF; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #4338CA; + background: #EEF2FF; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #E0E7FF; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox: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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #E0E7FF; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #E0E7FF; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #6366F1; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #6366F1; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #4F46E5; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #4F46E5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #6366F1; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #6366F1; + border: 1px solid #6366F1; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .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: none; + border-color: transparent; + } + .p-button.p-button-link:not(:disabled):active { + background: transparent; + color: #4F46E5; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #EEF2FF; + color: #4338CA; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #4338CA; + background: #EEF2FF; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #EEF2FF; + color: #4338CA; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #4338CA; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #6366F1; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #E0E7FF; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #E0E7FF; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #4338CA; + background: #EEF2FF; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #6366F1; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #6366F1; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #6366F1; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #6366F1; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #6366F1; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #4F46E5; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #6366F1; + background-color: #EEF2FF; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #4F46E5; + color: #ffffff; + border-color: #4F46E5; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #4338CA; + color: #ffffff; + border-color: #4338CA; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #6366F1; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #E0E7FF; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #6366F1; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #6366F1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #6366F1; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #6366F1; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bdccff; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #bdccff; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #bdccff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #bdccff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #EEF2FF; + color: #4338CA; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #6366F1; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #6366F1; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #b1b3f8; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #6366F1; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #6366F1; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #6366F1; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #6366F1; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #6366F1; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #6366F1; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #6366F1; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #EEF2FF; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-lime/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-lime/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-lime/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-lime/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-lime/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-lime/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css new file mode 100644 index 0000000..4d51d27 --- /dev/null +++ b/public/themes/aura-light-lime/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #84cc16; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #f7fee7; + --highlight-text-color: #4d7c0f; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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:#f9fcf3; + --primary-100:#e1f3c7; + --primary-200:#cae99b; + --primary-300:#b3df6f; + --primary-400:#9bd642; + --primary-500:#84cc16; + --primary-600:#70ad13; + --primary-700:#5c8f0f; + --primary-800:#49700c; + --primary-900:#355209; +} + +.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: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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: #84cc16; +} +.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: #84cc16; +} +.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: #84cc16; +} +.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: #84cc16; +} + +@layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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: #84cc16; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #4d7c0f; + background: #f7fee7; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #84cc16; + background: #84cc16; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #65a30d; + background: #65a30d; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #84cc16; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #65a30d; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #84cc16; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #65a30d; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #4d7c0f; + background: #f7fee7; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + border-radius: 50%; + transition-duration: 0.2s; + } + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #84cc16; + } + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #ffffff; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + background: #65a30d; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #4d7c0f; + background: #f7fee7; + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #4d7c0f; + background: #f7fee7; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #84cc16; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #84cc16; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #65a30d; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #65a30d; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #84cc16; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #84cc16; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #84cc16; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #84cc16; + border: 1px solid #84cc16; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #65a30d; + color: #ffffff; + border-color: #65a30d; + } + .p-button:not(:disabled):active { + background: #4d7c0f; + color: #ffffff; + border-color: #4d7c0f; + } + .p-button.p-button-outlined { + background-color: transparent; + color: #84cc16; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(132, 204, 22, 0.04); + color: #84cc16; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):active { + background: rgba(132, 204, 22, 0.16); + color: #84cc16; + border: 1px solid; + } + .p-button.p-button-outlined.p-button-plain { + color: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button.p-button-text { + background-color: transparent; + color: #84cc16; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):hover { + background: rgba(132, 204, 22, 0.04); + color: #84cc16; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):active { + background: rgba(132, 204, 22, 0.16); + color: #84cc16; + border-color: transparent; + } + .p-button.p-button-text.p-button-plain { + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #84cc16; + 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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #65a30d; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #65a30d; + 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: #65a30d; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #f7fee7; + color: #4d7c0f; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #4d7c0f; + background: #f7fee7; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-datatable .p-sortable-column.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #4d7c0f; + } + .p-datatable .p-sortable-column.p-highlight:hover { + background: #f7fee7; + color: #4d7c0f; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #4d7c0f; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #f7fee7; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #f7fee7; + } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #84cc16; + } + .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: #f8fafc; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #4d7c0f; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #4d7c0f; + } + .p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #f7fee7; + color: #4d7c0f; + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #cef96d; + } + .p-organizationchart .p-organizationchart-line-down { + background: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #f7fee7; + border-color: #f7fee7; + color: #4d7c0f; + } + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #4d7c0f; + background: #f7fee7; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(132, 204, 22, 0.24); + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .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: #4d7c0f; + } + .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: #4d7c0f; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #4d7c0f; + background: #f7fee7; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-treetable .p-sortable-column.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #4d7c0f; + } + .p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: #f7fee7; + color: #4d7c0f; + } + .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #4d7c0f; + } + .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #4d7c0f; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #84cc16; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f7fee7; + color: #4d7c0f; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #84cc16; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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: #84cc16; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + + .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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #84cc16; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #84cc16; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #84cc16; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #65a30d; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #84cc16; + background-color: #f7fee7; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #65a30d; + color: #ffffff; + border-color: #65a30d; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #4d7c0f; + color: #ffffff; + border-color: #4d7c0f; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #f7fee7; + color: #4d7c0f; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #84cc16; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #4d7c0f; + background: #f7fee7; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #4d7c0f; + } + .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: #4d7c0f; + } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: rgba(132, 204, 22, 0.24); + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #f7fee7; + color: #4d7c0f; + } + .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: #f7fee7; + color: #4d7c0f; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #84cc16; + 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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #84cc16; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #84cc16; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #84cc16; + } + .p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .p-tag { + background: #84cc16; + 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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #84cc16; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #84cc16; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #84cc16; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #84cc16; + } + .p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #e7fcb8; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #e7fcb8; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #e7fcb8; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #e7fcb8; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #f7fee7; + color: #4d7c0f; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #84cc16; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #84cc16; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #c4f17f; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #84cc16; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #84cc16; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #84cc16; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #84cc16; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #84cc16; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #84cc16; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #84cc16; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #f7fee7; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-noir/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-noir/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-noir/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-noir/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-noir/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-noir/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css new file mode 100644 index 0000000..ed78087 --- /dev/null +++ b/public/themes/aura-light-noir/theme.css @@ -0,0 +1,12119 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #020617; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #020617; + --highlight-text-color: #ffffff; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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:#f2f3f3; + --primary-100:#c2c3c7; + --primary-200:#92949b; + --primary-300:#62656f; + --primary-400:#323543; + --primary-500:#020617; + --primary-600:#020514; + --primary-700:#010410; + --primary-800:#01030d; + --primary-900:#010209; +} + +.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: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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: #020617; +} +.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: #020617; +} +.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: #020617; +} +.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: #020617; +} + +@layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #ffffff; + background: #020617; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: #334155; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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: #020617; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #ffffff; + background: #020617; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #ffffff; + background: #020617; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #ffffff; + background: #020617; + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #020617; + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #020617; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: #334155; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #020617; + background: #020617; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #0f172a; + background: #0f172a; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #020617; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f172a; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #020617; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f172a; + } + + .p-highlight .p-checkbox .p-checkbox-box { + border-color: #ffffff; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #020617; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #334155; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + border-radius: 50%; + transition-duration: 0.2s; + } + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #020617; + } + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #ffffff; + transform: translateX(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + background: #0f172a; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #020617; + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #334155; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #020617; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #334155; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #020617; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #020617; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #0f172a; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #0f172a; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #020617; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #020617; + } + .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #ef4444; + } + + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #ffffff; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #020617; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #020617; + border: 1px solid #020617; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-button:not(:disabled):hover { + background: #0f172a; + color: #ffffff; + border-color: #0f172a; + } + .p-button:not(:disabled):active { + background: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .p-button.p-button-outlined { + background-color: transparent; + color: #020617; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(2, 6, 23, 0.04); + color: #020617; + border: 1px solid; + } + .p-button.p-button-outlined:not(:disabled):active { + background: rgba(2, 6, 23, 0.16); + color: #020617; + border: 1px solid; + } + .p-button.p-button-outlined.p-button-plain { + color: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button.p-button-text { + background-color: transparent; + color: #020617; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):hover { + background: rgba(2, 6, 23, 0.04); + color: #020617; + border-color: transparent; + } + .p-button.p-button-text:not(:disabled):active { + background: rgba(2, 6, 23, 0.16); + color: #020617; + border-color: transparent; + } + .p-button.p-button-text.p-button-plain { + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #020617; + 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.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #0f172a; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #0f172a; + 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: #0f172a; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #020617; + color: #ffffff; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #ffffff; + background: #020617; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-datatable .p-sortable-column.p-highlight { + background: #020617; + color: #ffffff; + } + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #ffffff; + } + .p-datatable .p-sortable-column.p-highlight:hover { + background: #020617; + color: #ffffff; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #ffffff; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: #020617; + color: #ffffff; + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #020617; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #020617; + } + .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #020617; + } + .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: #f8fafc; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #020617; + 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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #020617; + color: #ffffff; + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #ffffff; + background: #020617; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #ffffff; + background: #020617; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #334155; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #020617; + color: #ffffff; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: black; + } + .p-organizationchart .p-organizationchart-line-down { + background: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #020617; + border-color: #020617; + color: #ffffff; + } + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #ffffff; + background: #020617; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #334155; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #020617; + 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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #ffffff; + background: #020617; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-treetable .p-sortable-column.p-highlight { + background: #020617; + color: #ffffff; + } + .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #ffffff; + } + .p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: #020617; + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #020617; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #020617; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #020617; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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: #020617; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + + .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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #020617; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #020617; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #020617; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #0f172a; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #020617; + background-color: #020617; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #0f172a; + color: #ffffff; + border-color: #0f172a; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #020617; + color: #ffffff; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #020617; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #ffffff; + background: #020617; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #ffffff; + } + .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: #ffffff; + } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { + background: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #020617; + 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: #020617; + 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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #020617; + 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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #020617; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #020617; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #020617; + } + .p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .p-tag { + background: #020617; + 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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #020617; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #020617; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #020617; + } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #020617; + } + .p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #020515; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #020515; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #020515; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #020515; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #020617; + color: #ffffff; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #020617; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #020617; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #2047ec; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #020617; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #020617; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #020617; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #020617; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #020617; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #020617; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #020617; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #020617; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-pink/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-pink/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-pink/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-pink/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-pink/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-pink/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css new file mode 100644 index 0000000..1d6b6c9 --- /dev/null +++ b/public/themes/aura-light-pink/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #ec4899; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #fdf2f8; + --highlight-text-color: #be185d; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #be185d; + background: #fdf2f8; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #be185d; + background: #fdf2f8; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #be185d; + background: #fdf2f8; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #db2777; + background: #db2777; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #db2777; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #db2777; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #ec4899; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #ec4899; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #db2777; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #db2777; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #ec4899; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #ec4899; + border: 1px solid #ec4899; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #db2777; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #db2777; + 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: #db2777; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #fdf2f8; + color: #be185d; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #be185d; + background: #fdf2f8; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #fdf2f8; + color: #be185d; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #be185d; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #ec4899; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #be185d; + background: #fdf2f8; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #ec4899; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #ec4899; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #ec4899; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #ec4899; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #db2777; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #ec4899; + background-color: #fdf2f8; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #db2777; + color: #ffffff; + border-color: #db2777; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #be185d; + color: #ffffff; + border-color: #be185d; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #ec4899; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ec4899; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #ec4899; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #ec4899; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #ec4899; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #f6c7e1; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #f6c7e1; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #f6c7e1; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #f6c7e1; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #fdf2f8; + color: #be185d; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #ec4899; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #ec4899; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #f6a4cc; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #ec4899; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #ec4899; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #ec4899; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #ec4899; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #ec4899; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #ec4899; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #ec4899; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #fdf2f8; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-purple/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-purple/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-purple/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-purple/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-purple/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-purple/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css new file mode 100644 index 0000000..eb8c0e6 --- /dev/null +++ b/public/themes/aura-light-purple/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #8B5CF6; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #F5F3FF; + --highlight-text-color: #6D28D9; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #6D28D9; + background: #F5F3FF; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #6D28D9; + background: #F5F3FF; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #6D28D9; + background: #F5F3FF; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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 #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #7C3AED; + background: #7C3AED; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7C3AED; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7C3AED; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #8B5CF6; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #8B5CF6; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #7C3AED; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #7C3AED; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #8B5CF6; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #8B5CF6; + border: 1px solid #8B5CF6; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #7C3AED; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #7C3AED; + 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: #7C3AED; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #F5F3FF; + color: #6D28D9; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #6D28D9; + background: #F5F3FF; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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:hover { + background: #F5F3FF; + color: #6D28D9; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #6D28D9; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .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 var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #8B5CF6; + } + .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: #f8fafc; + } + .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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .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: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #6D28D9; + background: #F5F3FF; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .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: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #8B5CF6; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #8B5CF6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #8B5CF6; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #8B5CF6; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #8B5CF6; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #7C3AED; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #8B5CF6; + background-color: #F5F3FF; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #7C3AED; + color: #ffffff; + border-color: #7C3AED; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #6D28D9; + color: #ffffff; + border-color: #6D28D9; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #8B5CF6; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8B5CF6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #8B5CF6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #8B5CF6; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #8B5CF6; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #ccc1ff; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #ccc1ff; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #ccc1ff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #ccc1ff; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #F5F3FF; + color: #6D28D9; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #8B5CF6; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #8B5CF6; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #c5aefb; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #8B5CF6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #8B5CF6; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #8B5CF6; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #8B5CF6; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #8B5CF6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #8B5CF6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #8B5CF6; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #F5F3FF; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/aura-light-teal/fonts/Inter-italic.var.woff2 b/public/themes/aura-light-teal/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/aura-light-teal/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/aura-light-teal/fonts/Inter-roman.var.woff2 b/public/themes/aura-light-teal/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/aura-light-teal/fonts/Inter-roman.var.woff2 differ diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css new file mode 100644 index 0000000..30bc0b5 --- /dev/null +++ b/public/themes/aura-light-teal/theme.css @@ -0,0 +1,12111 @@ +: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"; + --text-color: #334155; + --text-color-secondary: #64748b; + --primary-color: #14b8a6; + --primary-color-text: #ffffff; + --surface-0: #ffffff; + --surface-50: #f8fafc; + --surface-100: #f1f5f9; + --surface-200: #e2e8f0; + --surface-300: #cbd5e1; + --surface-400: #94a3b8; + --surface-500: #64748b; + --surface-600: #475569; + --surface-700: #334155; + --surface-800: #1e293b; + --surface-900: #0f172a; + --surface-950: #020617; + --gray-0: #ffffff; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; + --content-padding: 1.125rem; + --inline-spacing: 0.5rem; + --border-radius: 6px; + --surface-ground: #f8fafc; + --surface-section: #ffffff; + --surface-card: #ffffff; + --surface-overlay: #ffffff; + --surface-border: #e2e8f0; + --surface-hover: #f1f5f9; + --focus-ring: none; + --maskbg: rgba(0, 0, 0, 0.4); + --highlight-bg: #f0fdfa; + --highlight-text-color: #0f766e; + --p-anchor-gutter: 2px; + color-scheme: light; +} + +:root { + --p-focus-ring-color: var(--primary-color); +} + +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: "Regular"; + src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #e2e8f0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #64748b; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.25rem 0.25rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #334155; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #1e293b; + background: #f1f5f9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} +.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 #e2e8f0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #334155; + 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: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #334155; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #334155; +} +.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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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: #f87171; + } + + .p-text-secondary { + color: #64748b; + } + + .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; + outline-color: transparent; + } + .p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.25rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #94a3b8; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-autocomplete-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0.25rem; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + + .p-datepicker { + padding: 0.75rem; + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; + } + .p-datepicker .p-datepicker-header { + padding: 0 0 0.5rem 0; + color: #334155; + background: #ffffff; + font-weight: 500; + margin: 0 0 0 0; + border-bottom: 1px solid #e2e8f0; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1.75rem; + } + .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + font-weight: 500; + padding: 0.25rem; + } + .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 0 0; + } + .p-datepicker table th { + padding: 0.25rem; + } + .p-datepicker table th > span { + width: 2rem; + height: 2rem; + } + .p-datepicker table td { + padding: 0.25rem; + } + .p-datepicker table td > span { + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid transparent; + outline-color: transparent; + } + .p-datepicker table td > span.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-datepicker table td > span:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker table td.p-datepicker-today > span { + background: #e2e8f0; + color: #0f172a; + border-color: transparent; + } + .p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0 0 0; + border-top: 1px solid #e2e8f0; + } + .p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; + } + .p-datepicker .p-timepicker { + border-top: 1px solid #e2e8f0; + padding: 0; + } + .p-datepicker .p-timepicker button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-datepicker .p-timepicker button:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-datepicker .p-timepicker button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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.5rem 0 0 0; + } + .p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-datepicker .p-yearpicker { + margin: 0.5rem 0 0 0; + } + .p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #e2e8f0; + 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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .p-cascadeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-cascadeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-cascadeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; + } + .p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #64748b; + } + .p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; + } + .p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-cascadeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-cascadeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0.25rem; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #f0fdfa; + } + .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: #1e293b; + background: #f1f5f9; + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 1.25rem; + height: 1.25rem; + } + .p-checkbox .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; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 0.875rem; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 0.875rem; + height: 0.875rem; + } + .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: #94a3b8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #0d9488; + background: #0d9488; + color: #ffffff; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f87171; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0d9488; + } + + .p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0d9488; + } + + .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: #94a3b8; + } + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .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: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e2e8f0; + color: #0f172a; + } + .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: #334155; + padding: 0; + margin: 0; + } + .p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + } + + .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 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px 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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-dropdown:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-dropdown:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-dropdown.p-variant-filled { + background: #f8fafc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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: #64748b; + } + .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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-dropdown .p-dropdown-clear-icon { + color: #94a3b8; + right: 2.5rem; + } + .p-dropdown.p-invalid.p-component { + border-color: #f87171; + } + + .p-dropdown-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-dropdown-panel .p-dropdown-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0.25rem; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #f0fdfa; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .p-inputgroup-addon { + background: #ffffff; + color: #64748b; + border-top: 1px solid #cbd5e1; + border-left: 1px solid #cbd5e1; + border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; + } + .p-inputgroup-addon:last-child { + border-right: 1px solid #cbd5e1; + } + + .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.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: #94a3b8; + } + + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #94a3b8; + } + + .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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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.5rem; + height: 1.5rem; + } + .p-inputswitch .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; + border-radius: 30px; + } + .p-inputswitch .p-inputswitch-slider { + background: #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 30px; + outline-color: transparent; + } + .p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + 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(1rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #94a3b8; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #f87171; + } + + .p-fluid .p-inputtext { + width: 100%; + } + + .p-inputtext { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + color: #334155; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + appearance: none; + border-radius: 6px; + outline-color: transparent; + } + .p-inputtext:enabled:hover { + border-color: #94a3b8; + } + .p-inputtext:enabled:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-inputtext.p-invalid.p-component { + border-color: #f87171; + } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + .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: #64748b; + transition-duration: 0.2s; + } + + .p-float-label > .p-invalid + label { + color: #f87171; + } + + .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: #64748b; + } + + :-moz-placeholder { + color: #64748b; + } + + ::-moz-placeholder { + color: #64748b; + } + + :-ms-input-placeholder { + color: #64748b; + } + + .p-input-filled .p-inputtext { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:hover { + background-color: #f8fafc; + } + .p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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: #334155; + border: 1px solid #cbd5e1; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .p-listbox .p-listbox-list { + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-listbox .p-listbox-list .p-listbox-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #f0fdfa; + } + .p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + 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: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-listbox.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-listbox.p-invalid { + border-color: #f87171; + } + + .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 #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-multiselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-multiselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-multiselect .p-multiselect-label.p-placeholder { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + 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: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-multiselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; + } + + .p-multiselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-multiselect-panel .p-multiselect-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 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: #94a3b8; + } + .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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0.25rem; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .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: #f0fdfa; + } + .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: #1e293b; + background: #f1f5f9; + } + .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.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + color: #334155; + background: transparent; + } + + .p-password { + display: inline-flex; + } + + .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-invalid.p-component > .p-inputtext { + border-color: #f87171; + } + + .p-password-panel { + padding: 0 1.125rem 1.125rem 1.125rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #e2e8f0; + } + .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: 1.25rem; + height: 1.25rem; + } + .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 #cbd5e1; + border-radius: 50%; + } + .p-radiobutton .p-radiobutton-box { + border: 1px solid #cbd5e1; + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + color: #334155; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 0.75rem; + height: 0.75rem; + transition-duration: 0.2s; + background-color: #14b8a6; + } + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #14b8a6; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #94a3b8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + border-color: #0d9488; + background: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #0d9488; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f87171; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #f8fafc; + } + .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: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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: #f87171; + } + .p-rating .p-rating-item.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .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: #ef4444; + } + + .p-selectbutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-selectbutton .p-button.p-highlight { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #0f172a; + } + .p-selectbutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .p-slider { + background: #e2e8f0; + border: 0 none; + border-radius: 6px; + } + .p-slider.p-slider-horizontal { + height: 3px; + } + .p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -10px; + margin-left: -10px; + } + .p-slider.p-slider-vertical { + width: 3px; + } + .p-slider.p-slider-vertical .p-slider-handle { + margin-left: -10px; + margin-bottom: -10px; + } + .p-slider .p-slider-handle { + height: 20px; + width: 20px; + background: #e2e8f0; + border: 0 none; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-slider .p-slider-range { + background: #14b8a6; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #e2e8f0; + border-color: transparent; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .p-treeselect { + background: #ffffff; + border: 1px solid #cbd5e1; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-treeselect:not(.p-disabled):hover { + border-color: #94a3b8; + } + .p-treeselect:not(.p-disabled).p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-treeselect.p-variant-filled { + background: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treeselect .p-treeselect-label.p-placeholder { + color: #64748b; + } + .p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #f1f5f9; + color: #1e293b; + border-radius: 16px; + } + .p-treeselect .p-treeselect-trigger { + background: transparent; + color: #94a3b8; + width: 2.5rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-treeselect.p-invalid.p-component { + border-color: #f87171; + } + + .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; + } + + .p-treeselect-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .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 0.75rem; + color: #334155; + background: transparent; + } + + .p-input-filled .p-treeselect { + background: #f8fafc; + } + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f8fafc; + } + .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 #f1f5f9; + border-radius: 6px; + } + .p-togglebutton .p-button { + background: #f1f5f9; + border: 1px solid #f1f5f9; + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { + color: #64748b; + } + .p-togglebutton.p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, +.p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #334155; + } + .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: #334155; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #f1f5f9; + border-color: #f1f5f9; + color: #0f172a; + } + .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: #0f172a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-togglebutton.p-invalid > .p-button { + border-color: #f87171; + } + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + color: #ffffff; + background: #14b8a6; + border: 1px solid #14b8a6; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .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: #334155; + border-color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .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: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):hover { + background: #f1f5f9; + color: #334155; + } + .p-button.p-button-text.p-button-plain:not(:disabled):active { + background: #e2e8f0; + color: #334155; + } + .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: #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: 2.5rem; + 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.5rem; + } + .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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 0; + } + + .p-fluid .p-button { + width: 100%; + } + .p-fluid .p-button-icon-only { + width: 2.5rem; + } + .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 { + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .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 { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .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 { + 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 { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + .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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.16); + color: #f1f5f9; + 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 { + background-color: transparent; + color: #f1f5f9; + 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 { + background: rgba(241, 245, 249, 0.04); + border-color: transparent; + color: #f1f5f9; + } + .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 { + background: rgba(241, 245, 249, 0.16); + border-color: transparent; + color: #f1f5f9; + } + + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: #020617; + border: 1px solid #020617; + } + .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: #1e293b; + color: #ffffff; + border-color: #1e293b; + } + .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: #334155; + color: #ffffff; + border-color: #334155; + } + .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: #020617; + 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(2, 6, 23, 0.04); + color: #020617; + 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(2, 6, 23, 0.16); + color: #020617; + 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: #020617; + 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(2, 6, 23, 0.04); + border-color: transparent; + color: #020617; + } + .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(2, 6, 23, 0.16); + border-color: transparent; + color: #020617; + } + + .p-button.p-button-link { + color: #0d9488; + background: transparent; + border: transparent; + } + .p-button.p-button-link:not(:disabled):hover { + background: transparent; + color: #0d9488; + 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: #0d9488; + border-color: transparent; + } + + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .p-speeddial-button.p-button.p-button-icon-only { + width: 2.5rem; + height: 2.5rem; + } + .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-icon { + width: 1rem; + height: 1rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-speeddial-action { + width: 2.5rem; + height: 2.5rem; + background: #f1f5f9; + color: #475569; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-speeddial-action:hover { + background: #e2e8f0; + color: #334155; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-carousel .p-carousel-indicators { + padding: 1rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #e2e8f0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #cbd5e1; + } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #f0fdfa; + color: #0f766e; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-datatable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #0f766e; + background: #f0fdfa; + margin-left: 0.5rem; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-datatable .p-sortable-column.p-highlight { + background: #f0fdfa; + color: #0f766e; + } + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #0f766e; + } + .p-datatable .p-sortable-column.p-highlight:hover { + background: #f0fdfa; + color: #0f766e; + } + .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { + color: #0f766e; + } + .p-datatable .p-sortable-column:focus-visible { + box-shadow: 0 none; + outline: 0 none; + } + .p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: #475569; + border-color: transparent; + background: #f1f5f9; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + 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: 600; + } + .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-datatable .p-datatable-tbody > tr.p-highlight { + background: #f0fdfa; + color: #0f766e; + } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid var(--p-focus-ring-color); + 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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-datatable .p-column-resizer-helper { + background: #14b8a6; + } + .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: #f8fafc; + } + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #f0fdfa; + 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-sm .p-datatable-header { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; + } + .p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-dataview .p-dataview-content { + background: #ffffff; + color: #334155; + border: 0 none; + padding: 0; + } + .p-dataview .p-dataview-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-menu-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f1f5f9; + color: #475569; + } + .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: #0f766e; + } + .p-column-filter-menu-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-clear-button { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-column-filter-clear-button:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-column-filter-clear-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-column-filter-overlay { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + } + .p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0.25rem; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: #334155; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #1e293b; + background: #f1f5f9; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + color: #334155; + background: #ffffff; + margin: 0 0 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 1.125rem 1.125rem 1.125rem; + border-bottom: 1px solid #e2e8f0; + } + .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 1.125rem 1.125rem 1.125rem; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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.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-controls { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-orderlist .p-orderlist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-orderlist .p-orderlist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .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: #f8fafc; + } + .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #f0fdfa; + color: #0f766e; + } + .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #80eed5; + } + .p-organizationchart .p-organizationchart-line-down { + background: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #e2e8f0; + border-color: #e2e8f0; + } + .p-organizationchart .p-organizationchart-node-content { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; + outline-color: transparent; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-paginator-default { + display: flex; + } + + .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; + } + + .p-paginator { + background: #ffffff; + color: #334155; + border: solid #e2e8f0; + 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: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + border-color: transparent; + color: #475569; + } + .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; + margin-right: 0.5rem; + height: 2.5rem; + } + .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.5rem; + } + .p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + padding: 0 0.5rem; + } + .p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #64748b; + min-width: 2.5rem; + height: 2.5rem; + margin: 0.143rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #f0fdfa; + border-color: #f0fdfa; + color: #0f766e; + } + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #f1f5f9; + border-color: transparent; + color: #475569; + } + + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-picklist .p-picklist-header { + color: #334155; + padding: 1.125rem; + font-weight: 600; + } + .p-picklist .p-picklist-list { + color: #334155; + padding: 0.25rem 0.25rem; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e2e8f0; + } + .p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 0.75rem; + margin: 2px 0; + border: 0 none; + color: #334155; + background: transparent; + transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #1e293b; + background: #f1f5f9; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #0f766e; + background: #f0fdfa; + } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8fafc; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f1f5f9; + } + + .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; + } + + .p-timeline .p-timeline-event-marker { + border: 2px solid #e2e8f0; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: #ffffff; + } + .p-timeline .p-timeline-event-connector { + background-color: #e2e8f0; + } + .p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; + } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; + } + .p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; + } + + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .p-tree { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + padding: 0 1.125rem 1.125rem 1.125rem; + border-radius: 6px; + } + .p-tree .p-tree-container .p-treenode { + padding: 0 0; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + padding: 0.25rem 0.5rem; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #475569; + } + .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: #334155; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #f0fdfa; + 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: #f1f5f9; + color: #1e293b; + } + .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: #94a3b8; + } + .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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-footer { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; + } + .p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + font-weight: 600; + color: #334155; + background: #ffffff; + } + .p-treetable .p-sortable-column { + outline-color: var(--p-focus-ring-color); + } + .p-treetable .p-sortable-column .p-sortable-column-icon { + color: #64748b; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + color: #0f766e; + background: #f0fdfa; + margin-left: 0.5rem; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #475569; + } + .p-treetable .p-sortable-column.p-highlight { + background: #f0fdfa; + color: #0f766e; + } + .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #0f766e; + } + .p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #e2e8f0; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; + } + .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { + color: #334155; + } + .p-treetable .p-treetable-tbody > tr:focus-visible { + outline: 0.15rem solid var(--p-focus-ring-color); + outline-offset: -0.15rem; + } + .p-treetable .p-treetable-tbody > tr.p-highlight { + background: #f0fdfa; + 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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #1e293b; + } + .p-treetable .p-column-resizer-helper { + background: #14b8a6; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.65625rem 0.875rem; + } + .p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; + } + .p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 0.9375rem 1.25rem; + } + .p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; + } + + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #64748b; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-accordion .p-accordion-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .p-card { + background: #ffffff; + color: #334155; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-card .p-card-body { + padding: 1.5rem; + } + .p-card .p-card-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + .p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #64748b; + } + .p-card .p-card-content { + padding: 0 0 0 0; + } + .p-card .p-card-footer { + padding: 0 0 0 0; + } + + .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; + } + + .p-fieldset { + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-radius: 6px; + } + .p-fieldset .p-fieldset-legend { + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.125rem; + color: #334155; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { + color: #1e293b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #ffffff; + color: #1e293b; + } + .p-fieldset .p-fieldset-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #e2e8f0; + } + .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 solid #e2e8f0; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .p-panel .p-panel-header { + border: 1px solid #e2e8f0; + padding: 1.125rem; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-panel .p-panel-header .p-panel-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; + } + .p-panel .p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; + } + + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f1f5f9; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .p-splitter { + border: 1px solid #e2e8f0; + background: #ffffff; + border-radius: 6px; + color: #334155; + } + .p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + background: #e2e8f0; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #e2e8f0; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-splitter .p-splitter-gutter-resizing { + background: #e2e8f0; + } + + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #334155; + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f0fdfa; + color: #0f766e; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #334155; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #14b8a6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + color: #334155; + } + .p-stepper .p-stepper-separator { + background-color: #e2e8f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #334155; + } + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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 #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #e2e8f0; + color: #14b8a6; + } + .p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #14b8a6; + width: 2.5rem; + 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; + outline-color: transparent; + } + .p-tabview .p-tabview-nav-btn.p-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; + border: 0 none; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + + .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; + } + + .p-toolbar { + background: #ffffff; + border: 1px solid #e2e8f0; + padding: 1.125rem; + border-radius: 6px; + gap: 0.5rem; + } + .p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; + } + + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .p-confirm-popup { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; + } + .p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #e2e8f0; + } + .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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .p-dialog { + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border: 1px solid #e2e8f0; + } + .p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #334155; + 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: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + margin-right: 0.5rem; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; + } + .p-dialog .p-dialog-content { + background: #ffffff; + color: #334155; + padding: 0 1.5rem 1.5rem 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: #334155; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .p-overlaypanel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-overlaypanel .p-overlaypanel-close { + background: #14b8a6; + color: #ffffff; + width: 1.75rem; + height: 1.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + position: absolute; + top: -0.875rem; + right: -0.875rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #0d9488; + color: #ffffff; + } + .p-overlaypanel:after { + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + border-color: rgba(226, 232, 240, 0); + border-bottom-color: #d3dce8; + } + .p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; + } + .p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #e2e8f0; + } + + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .p-sidebar { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + } + .p-sidebar .p-sidebar-header { + padding: 1.125rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } + .p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; + } + .p-sidebar .p-sidebar-content { + padding: 0 1.125rem 1.125rem 1.125rem; + } + + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + + .p-tooltip .p-tooltip-text { + background: #334155; + color: #ffffff; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #334155; + } + .p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #334155; + } + .p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #334155; + } + .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #334155; + } + + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + gap: 0.5rem; + } + .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 0 1.125rem 1.125rem 1.125rem; + border: 1px solid #e2e8f0; + color: #334155; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-fileupload .p-fileupload-content.p-fileupload-highlight { + border: 1px dashed #14b8a6; + background-color: #f0fdfa; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 0.75rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #0d9488; + color: #ffffff; + border-color: #0d9488; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #0f766e; + color: #ffffff; + border-color: #0f766e; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .p-breadcrumb { + background: #ffffff; + border: 0 none; + border-radius: 6px; + padding: 1rem; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + outline-color: transparent; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: #94a3b8; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text { + color: #334155; + } + .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { + color: #94a3b8; + } + + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .p-contextmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + min-width: 12.5rem; + } + .p-contextmenu .p-contextmenu-root-list { + outline: 0 none; + } + .p-contextmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-contextmenu .p-menuitem { + margin: 2px 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-contextmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-contextmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: 0 none; + } + .p-dock .p-dock-link { + width: 3rem; + height: 3rem; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .p-megamenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-megamenu .p-megamenu-root-list { + outline: 0 none; + } + .p-megamenu .p-menuitem { + margin: 2px 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-megamenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-megamenu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-megamenu .p-submenu-list { + padding: 0.25rem 0.25rem; + min-width: 12.5rem; + } + .p-megamenu .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-vertical { + min-width: 12.5rem; + padding: 0.25rem 0.25rem; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 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: #334155; + } + .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + 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: #94a3b8; + 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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-megamenu.p-megamenu-mobile.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 2px 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menu .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menu.p-menu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: #94a3b8; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .p-menu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-menubar { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list { + outline: 0 none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link { + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + margin-left: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem { + margin: 2px 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .p-menubar .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-menubar .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + border-radius: 6px; + } + .p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; + } + .p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 1.75rem; + height: 1.75rem; + color: #94a3b8; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-menubar.p-menubar-mobile .p-menubar-button:hover { + color: #334155; + background: #f1f5f9; + } + .p-menubar.p-menubar-mobile .p-menubar-button:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 1.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.5rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + + .p-panelmenu .p-panelmenu-header { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border: 0 none; + color: #64748b; + background: #ffffff; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #64748b; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + font-weight: 600; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + 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: #e2e8f0; + background: #ffffff; + color: #334155; + } + .p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0.25rem; + border: 0 none; + background: #ffffff; + color: #334155; + 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 { + margin: 2px 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .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: #334155; + } + .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: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .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 #e2e8f0; + margin: 2px 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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #64748b; + border: 1px solid #e2e8f0; + 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: #334155; + } + .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #f0fdfa; + color: #0f766e; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 500; + color: #334155; + } + .p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #e2e8f0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + } + + .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; + } + + .p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #e2e8f0; + 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 #e2e8f0; + border-width: 0 0 1px 0; + border-color: transparent transparent #e2e8f0 transparent; + background: #ffffff; + color: #64748b; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin: 0 0 -1px 0; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: -2px; + box-shadow: inset none; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #334155; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #e2e8f0; + color: #14b8a6; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0.25rem; + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + border-radius: 6px; + min-width: 12.5rem; + } + .p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-tieredmenu .p-tieredmenu-root-list { + outline: 0 none; + } + .p-tieredmenu .p-submenu-list { + padding: 0.25rem 0.25rem; + background: #ffffff; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 2px 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content { + color: #334155; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link { + color: #334155; + padding: 0.5rem 0.75rem; + user-select: none; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon { + color: #94a3b8; + margin-right: 0.5rem; + } + .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon { + color: #94a3b8; + } + .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: #0f766e; + background: #f0fdfa; + } + .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: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #334155; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { + color: #334155; + background: #f1f5f9; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #334155; + } + .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: #334155; + } + .p-tieredmenu .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 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 { + 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; + } + + .p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; + } + .p-inline-message.p-inline-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + color: #2563eb; + } + .p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #2563eb; + } + .p-inline-message.p-inline-message-success { + background: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #16a34a; + } + .p-inline-message.p-inline-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #ca8a04; + } + .p-inline-message.p-inline-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + color: #dc2626; + } + .p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #dc2626; + } + .p-inline-message.p-inline-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #475569; + } + .p-inline-message.p-inline-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #f8fafc; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .p-message { + margin: 1rem 0; + border-radius: 6px; + } + .p-message .p-message-wrapper { + padding: 0.5rem 0.75rem; + } + .p-message .p-message-close { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.5); + } + .p-message .p-message-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-message.p-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .p-message.p-message-success .p-message-icon { + color: #16a34a; + } + .p-message.p-message-success .p-message-close { + color: #16a34a; + } + .p-message.p-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .p-message.p-message-warn .p-message-icon { + color: #ca8a04; + } + .p-message.p-message-warn .p-message-close { + color: #ca8a04; + } + .p-message.p-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-message.p-message-secondary .p-message-icon { + color: #475569; + } + .p-message.p-message-secondary .p-message-close { + color: #475569; + } + .p-message.p-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-icon { + color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close { + color: #f8fafc; + } + .p-message .p-message-text { + font-size: 1rem; + font-weight: 500; + } + .p-message .p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-message .p-icon:not(.p-message-close-icon) { + width: 1rem; + height: 1rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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: 0.75rem; + border-width: 1px; + } + .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: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon { + width: 1.125rem; + height: 1.125rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 500; + } + .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.125rem; + height: 1.125rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .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: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-toast .p-toast-message.p-toast-message-info { + background: rgba(239, 246, 255, 0.95); + border: solid #bfdbfe; + border-width: 1px; + 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: rgba(240, 253, 244, 0.95); + border: solid #bbf7d0; + border-width: 1px; + color: #16a34a; + } + .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: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-warn { + background: rgba(254, 252, 232, 0.95); + border: solid #fde68a; + border-width: 1px; + color: #ca8a04; + } + .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: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-error { + background: rgba(254, 242, 242, 0.95); + border: solid #fecaca; + border-width: 1px; + 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-toast .p-toast-message.p-toast-message-secondary { + background: #f1f5f9; + border: solid #e2e8f0; + border-width: 1px; + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #475569; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #020617; + border: solid #64748b; + border-width: 1px; + color: #f8fafc; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #f8fafc; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; + } + .p-galleria .p-galleria-close .p-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-item-nav { + background: transparent; + color: #f1f5f9; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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-icon { + width: 2rem; + height: 2rem; + } + .p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; + } + .p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f1f5f9; + padding: 1rem; + } + .p-galleria .p-galleria-indicators { + padding: 1rem; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #e2e8f0; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border-radius: 50%; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #cbd5e1; + } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #f0fdfa; + 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: #f0fdfa; + 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: #f1f5f9; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f1f5f9; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); + } + + .p-image-preview-indicator { + background-color: transparent; + color: #f8fafc; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + margin-right: 0.5rem; + } + .p-image-action.p-link:last-child { + margin-right: 0; + } + .p-image-action.p-link:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + } + .p-image-action.p-link i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .p-avatar { + background-color: #e2e8f0; + 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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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: #f1f5f9; + color: #475569; + } + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-badge.p-badge-contrast { + background-color: #020617; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .p-chip { + background-color: #f1f5f9; + color: #1e293b; + 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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-chip .p-chip-remove-icon:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + .p-chip .p-chip-remove-icon:focus { + outline: 0 none; + } + + .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 .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + } + .p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f1f5f9; + color: #1e293b; + } + .p-inplace .p-inplace-display:focus { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e2e8f0; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #14b8a6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #14b8a6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .p-progressbar { + border: 0 none; + height: 1.25rem; + background: #e2e8f0; + 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.25rem; + } + + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #dc2626; + 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: #dc2626; + } + 40% { + stroke: #2563eb; + } + 66% { + stroke: #16a34a; + } + 80%, 90% { + stroke: #ca8a04; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 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: #f8fafc; + } + .p-scrolltop .p-scrolltop-icon.p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .p-skeleton { + background-color: #e2e8f0; + 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 { + 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; + } + + .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-secondary { + background-color: #f1f5f9; + color: #475569; + } + .p-tag.p-tag-contrast { + background-color: #020617; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #e2e8f0; + padding: 0 1.125rem 1.125rem 1.125rem; + } + .p-terminal .p-terminal-input { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); + font-size: 1rem; + } +} +@layer primevue { + .p-accordion .p-accordion-header .p-accordion-header-link { + border-radius: 6px !important; + flex-direction: row-reverse; + justify-content: space-between; + } + .p-accordion .p-accordion-header .p-accordion-header-link:hover { + border-bottom-color: #e2e8f0; + } + .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + transform: rotate(90deg); + } + .p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon { + transform: rotate(-180deg); + } + .p-accordion .p-accordion-tab { + border-bottom: 1px solid #e2e8f0; + } + .p-accordion .p-accordion-tab:last-child { + border-bottom: 0 none; + } + + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + border-radius: 4px; + margin: 0; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.375rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token { + margin-left: 0.5rem; + } + .p-autocomplete.p-disabled { + opacity: 1; + } + + .p-button-label { + font-weight: 500; + } + + .p-button.p-button-success:enabled:focus-visible { + outline-color: #22c55e; + } + .p-button.p-button-info:enabled:focus-visible { + outline-color: #0ea5e9; + } + .p-button.p-button-warning:enabled:focus-visible { + outline-color: #f97316; + } + .p-button.p-button-help:enabled:focus-visible { + outline-color: #a855f7; + } + .p-button.p-button-danger:enabled:focus-visible { + outline-color: #ef4444; + } + .p-button.p-button-contrast:enabled:focus-visible { + outline-color: #020617; + } + .p-button.p-button-outlined { + border-color: var(--primary-200); + } + .p-button.p-button-outlined:not(:disabled):hover, .p-button.p-button-outlined:not(:disabled):active { + border-color: var(--primary-200); + } + .p-button.p-button-outlined.p-button-secondary { + border-color: var(--surface-200); + color: #64748b; + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):hover { + color: #64748b; + background-color: #f1f5f9; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-secondary:not(:disabled):active { + color: #64748b; + background-color: #e2e8f0; + border-color: var(--surface-200); + } + .p-button.p-button-outlined.p-button-success { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-success:not(:disabled):hover, .p-button.p-button-outlined.p-button-success:not(:disabled):active { + border-color: #bbf7d0; + } + .p-button.p-button-outlined.p-button-info { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-info:not(:disabled):hover, .p-button.p-button-outlined.p-button-info:not(:disabled):active { + border-color: #bae6fd; + } + .p-button.p-button-outlined.p-button-warning { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-warning:not(:disabled):hover, .p-button.p-button-outlined.p-button-warning:not(:disabled):active { + border-color: #fed7aa; + } + .p-button.p-button-outlined.p-button-help { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-help:not(:disabled):hover, .p-button.p-button-outlined.p-button-help:not(:disabled):active { + border-color: #e9d5ff; + } + .p-button.p-button-outlined.p-button-danger { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-danger:not(:disabled):hover, .p-button.p-button-outlined.p-button-danger:not(:disabled):active { + border-color: #fecaca; + } + .p-button.p-button-outlined.p-button-contrast { + border-color: #334155; + } + .p-button.p-button-outlined.p-button-contrast:not(:disabled):hover, .p-button.p-button-outlined.p-button-contrast:not(:disabled):active { + border-color: #334155; + } + .p-button.p-button-secondary.p-button-text { + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):hover { + background: #f1f5f9; + color: #64748b; + } + .p-button.p-button-secondary.p-button-text:not(:disabled):active { + background: #e2e8f0; + color: #64748b; + } + + .p-datepicker-buttonbar .p-button { + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + } + + .p-datepicker .p-datepicker-group-container + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; + } + .p-datepicker table th { + font-weight: 500; + } + + .p-card { + border-radius: 12px; + display: flex; + flex-direction: column; + } + .p-card .p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-card .p-card-caption .p-card-title, +.p-card .p-card-caption .p-card-subtitle { + margin-bottom: 0; + } + .p-card .p-card-body { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #14b8a6; + } + + .p-cascadeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-cascadeselect .p-cascadeselect-label { + box-shadow: none; + } + .p-cascadeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-cascadeselect.p-disabled .p-cascadeselect-label { + color: #64748b; + } + + div.p-cascadeselect-panel { + border: 0 none; + box-shadow: none; + } + + .p-checkbox .p-checkbox-box { + border-radius: 4px; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #14b8a6; + } + .p-checkbox.p-disabled { + opacity: 1; + } + .p-checkbox.p-disabled .p-checkbox-box { + background-color: #e2e8f0; + border: 1px solid #cbd5e1; + } + .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: #64748b; + } + + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.25rem; + gap: 0.25rem; + } + .p-chips .p-chips-multiple-container .p-chips-token { + border-radius: 4px; + margin: 0; + } + .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.375rem; + } + .p-chips .p-chips-multiple-container .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token { + margin-left: 0.5rem; + } + .p-chips.p-disabled .p-chips-multiple-container { + opacity: 1; + background-color: #e2e8f0; + } + + .p-chip { + border-radius: 16px; + padding: 0.25rem 0.75rem; + } + .p-chip .p-chip-text { + margin-top: 0; + margin-bottom: 0; + } + .p-chip .p-chip-remove-icon { + margin-left: 0.375rem; + } + .p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + .p-chip img { + margin-left: -0.5rem; + } + + .p-colorpicker-preview { + padding: 0; + } + .p-colorpicker-preview:enabled:focus { + outline-offset: 2px; + } + .p-colorpicker-preview.p-inputtext.p-disabled { + opacity: 0.6; + } + + .p-confirm-popup { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + .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-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #c5f7ec; + } + .p-datatable .p-datatable-tbody > tr.p-highlight > td { + border-bottom-color: #c5f7ec; + } + + .p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; + } + + .p-dialog { + border-radius: 12px; + background-color: #ffffff; + } + .p-dialog.p-dialog-maximized { + border-radius: 0; + } + .p-dialog .p-dialog-header { + border-top-right-radius: 12px; + border-top-left-radius: 12px; + } + .p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + .p-dialog .p-dialog-footer { + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + } + + .p-dropdown { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-dropdown .p-dropdown-label { + box-shadow: none; + } + .p-dropdown.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-dropdown.p-disabled .p-dropdown-label { + color: #64748b; + } + + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + margin-left: -0.375rem; + margin-right: 0.375rem; + } + + .p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td { + border-bottom-color: #c5f7ec; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td { + border-bottom-color: #c5f7ec; + } + .p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover { + background-color: #f0fdfa; + color: #0f766e; + } + + .p-fieldset { + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.5rem 0.75rem; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text { + padding: 0; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + color: #64748b; + } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background-color: #f1f5f9; + } + .p-fieldset .p-fieldset-legend { + border: 0 none; + padding: 0; + margin-bottom: 0.375rem; + } + .p-fieldset .p-fieldset-legend span { + padding: 0.5rem 0.75rem; + } + .p-fieldset .p-fieldset-content { + padding: 0; + } + + .p-column-filter-overlay-menu { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraints { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0 0 0 0; + } + .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-bottom: 0.5rem; + } + .p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button { + margin-bottom: 0; + } + .p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0; + } + .p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0; + } + + .p-fileupload .p-fileupload-content { + border-top: 0 none; + padding-top: 1.125rem; + } + + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #14b8a6; + } + + .p-inline-message-text { + font-weight: 500; + } + + .p-inline-message { + backdrop-filter: blur(1.5px); + } + + .p-inline-message.p-inline-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + + .p-inline-message.p-inline-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + + .p-inline-message.p-inline-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + + .p-inline-message.p-inline-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + + .p-inline-message.p-inline-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + + .p-inline-message.p-inline-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + + .p-inputgroup-addon { + padding: 0.5rem; + } + + .p-inputnumber.p-inputnumber-buttons-stacked { + position: relative; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: transparent; + border: 0 none; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up { + border-left: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down { + border-right: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button { + background-color: transparent; + border: 1px solid #cbd5e1; + color: #64748b; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + background-color: #f1f5f9; + color: #475569; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + background-color: #e2e8f0; + color: #334155; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up { + border-bottom: 0 none; + } + .p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down { + border-top: 0 none; + } + + .p-inputswitch .p-inputswitch-slider { + border: 0 none; + } + .p-inputswitch.p-highlight p-inputswitch-slider:before { + left: 1.25rem; + transform: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { + background: #f87171; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider:before { + background: #ffffff; + } + + .p-inputtext { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + + .p-inputtext:disabled { + opacity: 1; + background-color: #e2e8f0; + color: #64748b; + } + + .p-knob svg { + border-radius: 6px; + outline-color: transparent; + transition: outline-color 0.2s; + } + .p-knob svg:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-listbox { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-listbox.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-listbox.p-disabled .p-listbox-list .p-listbox-item { + color: #64748b; + } + + .p-message { + backdrop-filter: blur(1.5px); + } + + .p-message.p-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-message.p-message-info .p-message-close:focus-visible { + outline-color: #2563eb; + } + .p-message.p-message-info .p-message-close:hover { + background: #dbeafe; + } + + .p-message.p-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-message.p-message-success .p-message-close:focus-visible { + outline-color: #16a34a; + } + .p-message.p-message-success .p-message-close:hover { + background: #dcfce7; + } + + .p-message.p-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-message.p-message-warn .p-message-close:focus-visible { + outline-color: #ca8a04; + } + .p-message.p-message-warn .p-message-close:hover { + background: #fef9c3; + } + + .p-message.p-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-message.p-message-error .p-message-close:focus-visible { + outline-color: #dc2626; + } + .p-message.p-message-error .p-message-close:hover { + background: #fee2e2; + } + + .p-message.p-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-message.p-message-secondary .p-message-close:focus-visible { + outline-color: #475569; + } + .p-message.p-message-secondary .p-message-close:hover { + background: #e2e8f0; + } + + .p-message.p-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-message.p-message-contrast .p-message-close:focus-visible { + outline-color: #f8fafc; + } + .p-message.p-message-contrast .p-message-close:hover { + background: #1e293b; + } + + .p-multiselect-panel .p-multiselect-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .p-multiselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-multiselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-multiselect.p-disabled .p-multiselect-label { + color: #64748b; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token { + border-radius: 4px; + margin-right: 0.25rem; + } + .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.375rem; + } + + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; + } + + .p-panelmenu .p-panelmenu-header { + border-radius: 4px; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + outline: 0 none; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action { + background: #e2e8f0; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #334155; + padding: 0.5rem 0.75rem; + font-weight: 600; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + color: #94a3b8; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover { + background: #f1f5f9; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon { + color: #334155; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-content { + border-radius: 6px; + padding: 0 0 0 1rem; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-top: 2px; + } + .p-panelmenu .p-panelmenu-panel { + padding: 0.25rem 0.25rem; + overflow: hidden; + margin-bottom: 0.75rem; + border: 1px solid #e2e8f0; + border-radius: 6px; + } + + .p-password-panel { + background-color: #ffffff; + border: 1px solid #e2e8f0; + padding: 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; + } + .p-password-panel .p-password-meter { + margin-bottom: 0.75rem; + background: #e2e8f0; + border-radius: 6px; + } + .p-password-panel .p-password-meter .p-password-strength { + border-radius: 6px; + } + .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-orderlist-controls .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-orderlist-controls .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-orderlist-controls .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-orderlist-controls .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-orderlist .p-orderlist-header { + background: #ffffff; + color: #334155; + border: 0 none; + border-bottom: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-orderlist .p-orderlist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-orderlist .p-orderlist-list .p-orderlist-item { + border-radius: 6px; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border: 0 none; + } + + .p-organizationchart .p-organizationchart-node-content { + padding: 0.75rem 1rem; + border-radius: 6px; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + border: 1px solid #e2e8f0; + display: inline-flex; + justify-content: center; + align-items: center; + } + .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: static; + } + .p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) { + padding: 0.75rem 1rem 1.25rem 1rem; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) { + border-right: 0 none; + } + .p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) { + border-top-right-radius: 6px; + } + .p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { + border-left: 1px solid #e2e8f0; + border-top-left-radius: 6px; + } + + .p-overlaypanel { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + .p-overlaypanel .p-overlaypanel-content { + padding: 0.75rem; + } + .p-overlaypanel .p-overlaypanel-close { + width: 1.75rem; + height: 1.75rem; + color: #64748b; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + outline-color: transparent; + position: absolute; + top: 0.25rem; + right: 0.25rem; + } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { + color: #475569; + border-color: transparent; + background: #f1f5f9; + } + .p-overlaypanel .p-overlaypanel-close:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: 2px; + box-shadow: none; + } + + .p-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + background-color: #ffffff; + } + .p-panel .p-panel-header, +.p-panel .p-panel-content, +.p-panel .p-panel-footer { + background: transparent; + border: 0 none; + } + .p-panel:has(.p-panel-footer) .p-panel-content { + padding-bottom: 0.875rem; + } + + .p-picklist-buttons .p-button { + transition: opacity 0.2s, outline-color 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + color: #475569; + background: #f1f5f9; + border: 1px solid #f1f5f9; + } + .p-picklist-buttons .p-button:not(:disabled):hover { + background: #e2e8f0; + color: #334155; + border-color: #e2e8f0; + } + .p-picklist-buttons .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-picklist-buttons .p-button:not(:disabled):active { + background: #cbd5e1; + color: #1e293b; + border-color: #cbd5e1; + } + + .p-picklist .p-picklist-header { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; + color: #64748b; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + .p-picklist .p-picklist-list { + border: 1px solid #cbd5e1; + border: 0 none; + background: #ffffff; + color: #334155; + padding: 0.25rem 0.25rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-picklist .p-picklist-list .p-picklist-item { + border-radius: 6px; + } + .p-picklist .p-picklist-list:not(:first-child) { + border: 0 none; + } + + .p-progressbar-label { + font-size: 0.75rem; + font-weight: 600; + } + + .p-radiobutton .p-radiobutton-box { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline-width: 1px; + outline-offset: 2px; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #14b8a6; + } + .p-radiobutton.p-disabled { + opacity: 1; + } + .p-radiobutton.p-disabled .p-radiobutton-box { + border: 1px solid #cbd5e1; + background-color: #e2e8f0; + } + .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + background-color: #64748b; + } + + .p-rating { + gap: 0.25rem; + } + + .p-selectbutton .p-button .pi, +.p-selectbutton .p-button .p-button-label { + position: relative; + transition: none; + } + .p-selectbutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-selectbutton .p-button.p-highlight::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-selectbutton .p-button:focus-visible { + outline: 1px solid var(--p-focus-ring-color); + outline-offset: -1px; + box-shadow: none; + border-color: #94a3b8; + } + .p-selectbutton .p-button.p-disabled { + opacity: 1; + color: #94a3b8; + } + .p-selectbutton.p-invalid { + box-shadow: 0 0 0 1px #f87171; + border-radius: 6px; + } + .p-selectbutton.p-invalid > .p-button { + border: 1px solid #f1f5f9; + } + .p-selectbutton.p-disabled { + opacity: 1; + } + .p-selectbutton.p-disabled .p-button { + color: #94a3b8; + } + + .p-slider .p-slider-handle { + display: flex !important; + justify-content: center; + align-items: center; + } + .p-slider .p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: #ffffff; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--p-focus-ring-color), 0 1px 2px 0 black; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline-color: #75f0e3; + } + + .p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-splitter-gutter-handle { + border-radius: 6px; + } + + .p-stepper .p-stepper-header .p-stepper-number { + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffffff; + color: #14b8a6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #14b8a6; + } + + .p-steps .p-steps-item .p-menuitem-link .p-steps-number { + border-width: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-menuitem-link .p-steps-title { + font-weight: 500; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-steps .p-steps-item .p-steps-number { + position: relative; + font-weight: 500; + } + .p-steps .p-steps-item .p-steps-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + .p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ffffff; + color: #14b8a6; + } + .p-steps .p-steps-item.p-highlight .p-steps-title { + color: #14b8a6; + } + .p-steps .p-steps-item.p-disabled { + opacity: 1; + } + .p-steps .p-steps-item:before { + border-top-width: 2px; + margin-top: calc(-1rem + 1px); + } + .p-steps .p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); + } + .p-steps .p-steps-item:last-child::before { + width: 50%; + } + + .p-tabmenu .p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: #14b8a6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabmenu .p-tabmenu-nav { + position: relative; + } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + + .p-tabview .p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: 0; + height: 1px; + background-color: #14b8a6; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); + } + .p-tabview .p-tabview-nav { + position: relative; + } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + } + .p-tabview .p-tabview-nav-btn.p-link { + color: #64748b; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + 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); + box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6); + } + .p-tabview .p-tabview-nav-btn.p-link:hover { + color: #475569; + } + + .p-tag { + background: var(--primary-100); + color: var(--primary-700); + } + .p-tag.p-tag-success { + background: var(--green-100); + color: var(--green-700); + } + .p-tag.p-tag-info { + background: var(--blue-100); + color: var(--blue-700); + } + .p-tag.p-tag-warning { + background: var(--orange-100); + color: var(--orange-700); + } + .p-tag.p-tag-danger { + background: var(--red-100); + color: var(--red-700); + } + + .p-terminal { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + padding: 0.5rem 0.75rem; + border-radius: 6px; + } + .p-terminal .p-terminal-prompt { + margin-right: 0.25rem; + } + .p-terminal .p-terminal-response { + margin: 2px 0; + } + + .p-timeline .p-timeline-event-marker { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } + .p-timeline .p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background-color: #14b8a6; + } + .p-timeline .p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + } + + .p-toast .p-toast-message { + backdrop-filter: blur(1.5px); + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + font-size: 0.875rem; + } + .p-toast .p-toast-message .p-toast-icon-close { + width: 1.75rem; + height: 1.75rem; + margin-top: -25%; + right: -25%; + position: relative; + } + + .p-toast .p-toast-message.p-toast-message-info { + box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04); + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + outline-color: #2563eb; + } + .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover { + background: #dbeafe; + } + .p-toast .p-toast-message.p-toast-message-success { + box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04); + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + outline-color: #16a34a; + } + .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover { + background: #dcfce7; + } + .p-toast .p-toast-message.p-toast-message-warn { + box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04); + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + outline-color: #ca8a04; + } + .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover { + background: #fef9c3; + } + .p-toast .p-toast-message.p-toast-message-error { + box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04); + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-detail { + color: #334155; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover { + background: #fee2e2; + } + .p-toast .p-toast-message.p-toast-message-secondary { + box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04); + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover { + background: #e2e8f0; + } + .p-toast .p-toast-message.p-toast-message-contrast { + box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04); + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + outline-color: #dc2626; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover { + background: #1e293b; + } + + .p-togglebutton .p-button .p-button-label, +.p-togglebutton .p-button .p-button-icon { + position: relative; + transition: none; + } + .p-togglebutton .p-button::before { + content: ""; + background-color: transparent; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: 4px; + } + .p-togglebutton.p-highlight .p-button::before { + background: #ffffff; + border-color: #ffffff; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + } + .p-togglebutton.p-disabled { + opacity: 1; + } + .p-togglebutton.p-disabled .p-button { + color: #94a3b8; + } + .p-togglebutton.p-disabled .p-button .p-button-icon { + color: #94a3b8; + } + + .p-toolbar { + padding: 0.75rem; + } + + .p-tree { + border: 0 none; + padding: 1rem; + } + .p-tree .p-tree-container .p-treenode { + margin: 2px 0; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline-offset: -2px; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover { + background-color: #f0fdfa; + } + .p-tree .p-tree-container > .p-treenode:first-child { + margin-top: 0; + } + .p-tree .p-tree-container > .p-treenode:last-child { + margin-bottom: 0; + } + + .p-treeselect-panel .p-tree { + padding: 0.25rem 0.25rem; + } + + .p-treeselect { + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + } + .p-treeselect.p-disabled { + opacity: 1; + background-color: #e2e8f0; + } + .p-treeselect.p-disabled .p-treeselect-label { + color: #64748b; + } +} diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 09e6f3d..359ba84 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #151515; background: #8dd0ff; @@ -419,10 +643,6 @@ background: #64bfff; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 4px; transition: box-shadow 0.15s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #151515; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #3f4b5b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #3f4b5b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #3f4b5b; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 1px solid #3f4b5b; background: #20262e; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #8dd0ff; background: #8dd0ff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #3f4b5b; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1dadff; - background: #1dadff; - color: #151515; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #8dd0ff; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #1dadff; } @@ -806,6 +1324,52 @@ border-color: #151515; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #f19ea6; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ 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.12); - } - .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); } + .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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #3f4b5b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3f4b5b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #3f4b5b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #3f4b5b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #3f4b5b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1078,30 +2010,32 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #3f4b5b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #8dd0ff; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #151515; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #8dd0ff; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f19ea6; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #f19ea6; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1205,12 +2137,68 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .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.12); + 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; @@ -1277,11 +2275,118 @@ border-color: #f19ea6; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ 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.12); - } - .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); } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #3f4b5b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3f4b5b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3f4b5b; - } - .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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.15s; background-color: #151515; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #8dd0ff; background: #8dd0ff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #151515; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #8dd0ff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; - border-color: #8dd0ff; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #8dd0ff; @@ -1586,6 +2796,44 @@ border-color: #f19ea6; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #8dd0ff; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } .p-slider .p-slider-range { background: #8dd0ff; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #56bdff; border-color: #56bdff; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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-treeselect:not(.p-disabled):hover { border-color: #3f4b5b; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .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; @@ -1696,53 +3016,152 @@ background-color: #3f4b5b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f19ea6; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #151515; background: #8dd0ff; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #56bdff; color: #151515; border-color: #56bdff; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #1dadff; color: #151515; border-color: #1dadff; @@ -1767,12 +3187,12 @@ color: #8dd0ff; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(141, 208, 255, 0.16); color: #8dd0ff; border: 1px solid; @@ -1781,11 +3201,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1794,12 +3214,12 @@ color: #8dd0ff; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(141, 208, 255, 0.16); color: #8dd0ff; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -1888,331 +3308,457 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #5a6268; color: #ffffff; border-color: #5a6268; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #545b62; color: #ffffff; border-color: #4e555b; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #6c757d; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #4cc8db; color: #151515; border-color: #26bdd3; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #b1e8f0; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #26bdd3; color: #151515; border-color: #00b2cc; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #7fd8e6; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #78cc86; color: #151515; border-color: #5ac06c; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #c5e8ca; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #5ac06c; color: #151515; border-color: #3cb553; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #9fdaa8; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd54f; color: #151515; border-color: #ffca28; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffecb3; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffca28; color: #151515; border-color: #ffc107; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9a7cd4; color: #151515; border-color: #845fca; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d3c7ec; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #845fca; color: #151515; border-color: #6d43c0; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #b7a2e0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #e97984; color: #151515; border-color: #f75965; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffd0d9; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #f75965; color: #151515; border-color: #fd464e; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #f19ea6; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #56bdff; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #8dd0ff; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3786,8 @@ height: 3rem; background: #343e4d; color: #fff; + outline-color: transparent; + transition: color 0.15s, box-shadow 0.15s; } .p-speeddial-action:hover { background: #3f4b5b; @@ -2292,263 +3840,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(141, 208, 255, 0.04); - color: #8dd0ff; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(141, 208, 255, 0.04); - color: #8dd0ff; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #6c757d; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - border-color: transparent; - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(108, 117, 125, 0.16); - border-color: transparent; - color: #6c757d; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(127, 216, 230, 0.04); - color: #7fd8e6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(127, 216, 230, 0.04); - border-color: transparent; - color: #7fd8e6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(127, 216, 230, 0.16); - border-color: transparent; - color: #7fd8e6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 218, 168, 0.04); - color: #9fdaa8; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 218, 168, 0.04); - border-color: transparent; - color: #9fdaa8; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(159, 218, 168, 0.16); - border-color: transparent; - color: #9fdaa8; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #ffe082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #ffe082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #ffe082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(183, 162, 224, 0.04); - color: #b7a2e0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(183, 162, 224, 0.04); - border-color: transparent; - color: #b7a2e0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(183, 162, 224, 0.16); - border-color: transparent; - color: #b7a2e0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f19ea6; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(241, 158, 166, 0.04); - color: #f19ea6; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(241, 158, 166, 0.16); - color: #f19ea6; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f19ea6; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(241, 158, 166, 0.04); - border-color: transparent; - color: #f19ea6; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(241, 158, 166, 0.16); - border-color: transparent; - color: #f19ea6; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3965,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +4002,241 @@ color: #151515; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2699,6 +4340,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .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, @@ -2730,6 +4372,10 @@ 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; } @@ -2809,17 +4455,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #2f3641; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #151515; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4521,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -2903,6 +4545,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2931,6 +4574,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2963,6 +4607,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #151515; background: #8dd0ff; @@ -3010,31 +4660,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); 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-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:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3043,13 +4738,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; @@ -3065,6 +4770,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3097,6 +4855,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4863,46 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #2a323d; color: #8dd0ff; @@ -3186,31 +4985,72 @@ color: #8dd0ff; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); 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-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:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3219,13 +5059,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; @@ -3241,6 +5091,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5227,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3296,6 +5339,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3314,7 +5358,7 @@ .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 { + .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 { @@ -3355,6 +5399,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3447,6 +5660,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5676,7 @@ .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 { + .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 { @@ -3552,6 +5766,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3560,6 +5791,7 @@ font-weight: 600; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3652,6 +5884,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -3675,6 +5926,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3696,6 +5948,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3704,7 +6012,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #3f4b5b; + border-top: 1px solid #3f4b5b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3714,12 +6022,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #3f4b5b; + border-left: 1px solid #3f4b5b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -3739,6 +6067,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3774,10 +6103,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3785,6 +6171,66 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -3798,6 +6244,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3808,6 +6255,244 @@ background: #3f4b5b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3828,6 +6513,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3850,6 +6536,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3865,6 +6552,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -3876,6 +6583,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3898,12 +6675,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(42, 50, 61, 0); border-bottom-color: #2a323d; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(63, 75, 91, 0); border-bottom-color: #3c4756; } @@ -3924,6 +6701,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -3949,6 +6863,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3978,14 +6893,12 @@ background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3993,6 +6906,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4019,12 +7002,12 @@ color: #151515; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(42, 50, 61, 0); border-bottom-color: #2a323d; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(63, 75, 91, 0); border-bottom-color: #3c4756; } @@ -4035,6 +7018,159 @@ border-top-color: #3f4b5b; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4044,6 +7180,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4053,6 +7193,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4073,6 +7214,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4093,6 +7289,50 @@ border-bottom-color: #3f4b5b; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4157,6 +7397,38 @@ border-color: #1dadff; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4166,6 +7438,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4189,6 +7462,48 @@ color: rgba(255, 255, 255, 0.87); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4196,7 +7511,7 @@ border: 1px solid #3f4b5b; box-shadow: none; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4208,6 +7523,15 @@ box-shadow: none; border-radius: 4px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4243,7 +7567,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4251,6 +7575,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4273,6 +7607,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4321,27 +7761,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #343e4d; @@ -4352,6 +7951,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4387,7 +7995,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4395,6 +8003,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4410,6 +8028,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; box-shadow: none; + border-radius: 4px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4422,14 +8041,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4462,6 +8081,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.5rem 0; + background: #2a323d; + border: 1px solid #3f4b5b; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f4b5b; + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.15s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.15s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4469,7 +8158,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4506,7 +8204,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4514,6 +8212,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4543,6 +8251,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4583,6 +8397,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4618,7 +8441,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4626,6 +8449,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4641,7 +8474,8 @@ background: #2a323d; border: 1px solid #3f4b5b; box-shadow: none; - width: 12.5rem; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #3f4b5b; @@ -4650,95 +8484,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.15s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.15s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4748,6 +8586,7 @@ background: #2a323d; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4797,6 +8636,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4832,7 +8680,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4840,6 +8688,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4888,11 +8746,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4933,6 +8845,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -4953,6 +8905,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4973,13 +8926,62 @@ color: rgba(255, 255, 255, 0.6); } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2a323d; @@ -4994,6 +8996,16 @@ background: #2a323d; border: 1px solid #3f4b5b; box-shadow: none; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5030,7 +9042,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5038,6 +9050,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5060,6 +9082,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5112,6 +9154,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5125,6 +9216,7 @@ border-radius: 50%; background: transparent; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5195,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5229,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5279,6 +9445,290 @@ color: #721c24; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5380,6 +9830,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5390,6 +9843,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5436,6 +9963,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5461,6 +10027,39 @@ border: 2px solid #2a323d; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #8dd0ff; color: #151515; @@ -5503,6 +10102,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -5527,6 +10164,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5537,10 +10175,29 @@ outline: 0 none; } + .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 .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5552,6 +10209,210 @@ box-shadow: 0 0 0 1px #e3f3fe; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f4b5b; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8dd0ff; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #8dd0ff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5568,6 +10429,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5613,6 +10500,67 @@ stroke: #856404; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5635,6 +10583,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5643,6 +10623,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #8dd0ff; color: #151515; @@ -5668,14 +10664,39 @@ color: #151515; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index f43ecf9..9fb26d7 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #151515; background: #c298d8; @@ -419,10 +643,6 @@ background: #b07acd; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 4px; transition: box-shadow 0.15s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #151515; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #3f4b5b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #3f4b5b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #3f4b5b; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 1px solid #3f4b5b; background: #20262e; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #c298d8; background: #c298d8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #3f4b5b; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9954bb; - background: #9954bb; - color: #151515; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #c298d8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9954bb; } @@ -806,6 +1324,52 @@ border-color: #151515; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #f19ea6; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ 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.12); - } - .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); } + .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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #3f4b5b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3f4b5b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #3f4b5b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #3f4b5b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #3f4b5b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1078,30 +2010,32 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #3f4b5b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #c298d8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #151515; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #c298d8; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f19ea6; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #f19ea6; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1205,12 +2137,68 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .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.12); + 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; @@ -1277,11 +2275,118 @@ border-color: #f19ea6; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ 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.12); - } - .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); } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #3f4b5b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3f4b5b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3f4b5b; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - border-color: #c298d8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.15s; background-color: #151515; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #c298d8; background: #c298d8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #151515; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #c298d8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; - border-color: #c298d8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #c298d8; @@ -1586,6 +2796,44 @@ border-color: #f19ea6; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #c298d8; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } .p-slider .p-slider-range { background: #c298d8; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #aa70c7; border-color: #aa70c7; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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-treeselect:not(.p-disabled):hover { border-color: #3f4b5b; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 1px #f0e6f5; border-color: #c298d8; } + .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; @@ -1696,53 +3016,152 @@ background-color: #3f4b5b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f19ea6; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #151515; background: #c298d8; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #aa70c7; color: #151515; border-color: #aa70c7; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #9954bb; color: #151515; border-color: #9954bb; @@ -1767,12 +3187,12 @@ color: #c298d8; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(194, 152, 216, 0.16); color: #c298d8; border: 1px solid; @@ -1781,11 +3201,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1794,12 +3214,12 @@ color: #c298d8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(194, 152, 216, 0.16); color: #c298d8; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -1888,331 +3308,457 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #5a6268; color: #ffffff; border-color: #5a6268; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #545b62; color: #ffffff; border-color: #4e555b; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #6c757d; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #4cc8db; color: #151515; border-color: #26bdd3; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #b1e8f0; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #26bdd3; color: #151515; border-color: #00b2cc; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #7fd8e6; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #78cc86; color: #151515; border-color: #5ac06c; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #c5e8ca; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #5ac06c; color: #151515; border-color: #3cb553; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #9fdaa8; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd54f; color: #151515; border-color: #ffca28; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffecb3; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffca28; color: #151515; border-color: #ffc107; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9a7cd4; color: #151515; border-color: #845fca; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d3c7ec; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #845fca; color: #151515; border-color: #6d43c0; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #b7a2e0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #e97984; color: #151515; border-color: #f75965; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffd0d9; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #f75965; color: #151515; border-color: #fd464e; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #f19ea6; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #aa70c7; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #c298d8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3786,8 @@ height: 3rem; background: #343e4d; color: #fff; + outline-color: transparent; + transition: color 0.15s, box-shadow 0.15s; } .p-speeddial-action:hover { background: #3f4b5b; @@ -2292,263 +3840,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(194, 152, 216, 0.04); - color: #c298d8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(194, 152, 216, 0.04); - color: #c298d8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #6c757d; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - border-color: transparent; - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(108, 117, 125, 0.16); - border-color: transparent; - color: #6c757d; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(127, 216, 230, 0.04); - color: #7fd8e6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(127, 216, 230, 0.04); - border-color: transparent; - color: #7fd8e6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(127, 216, 230, 0.16); - border-color: transparent; - color: #7fd8e6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 218, 168, 0.04); - color: #9fdaa8; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 218, 168, 0.04); - border-color: transparent; - color: #9fdaa8; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(159, 218, 168, 0.16); - border-color: transparent; - color: #9fdaa8; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #ffe082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #ffe082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #ffe082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(183, 162, 224, 0.04); - color: #b7a2e0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(183, 162, 224, 0.04); - border-color: transparent; - color: #b7a2e0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(183, 162, 224, 0.16); - border-color: transparent; - color: #b7a2e0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #f19ea6; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(241, 158, 166, 0.04); - color: #f19ea6; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(241, 158, 166, 0.16); - color: #f19ea6; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #f19ea6; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(241, 158, 166, 0.04); - border-color: transparent; - color: #f19ea6; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(241, 158, 166, 0.16); - border-color: transparent; - color: #f19ea6; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3965,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +4002,241 @@ color: #151515; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2699,6 +4340,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .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, @@ -2730,6 +4372,10 @@ 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; } @@ -2809,17 +4455,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #2f3641; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #151515; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4521,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -2903,6 +4545,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2931,6 +4574,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2963,6 +4607,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #151515; background: #c298d8; @@ -3010,31 +4660,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); 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-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:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3043,13 +4738,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; @@ -3065,6 +4770,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3097,6 +4855,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4863,46 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #2a323d; color: #c298d8; @@ -3186,31 +4985,72 @@ color: #c298d8; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); 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-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:not(:first-child) { + border-top: 1px solid #3f4b5b; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3219,13 +5059,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; @@ -3241,6 +5091,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5227,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3296,6 +5339,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3314,7 +5358,7 @@ .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 { + .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 { @@ -3355,6 +5399,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3447,6 +5660,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5676,7 @@ .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 { + .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 { @@ -3552,6 +5766,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3560,6 +5791,7 @@ font-weight: 600; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3652,6 +5884,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -3675,6 +5926,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3696,6 +5948,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3704,7 +6012,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #3f4b5b; + border-top: 1px solid #3f4b5b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3714,12 +6022,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #3f4b5b; + border-left: 1px solid #3f4b5b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -3739,6 +6067,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3774,10 +6103,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3785,6 +6171,66 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -3798,6 +6244,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3808,6 +6255,244 @@ background: #3f4b5b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3828,6 +6513,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3850,6 +6536,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3865,6 +6552,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -3876,6 +6583,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3898,12 +6675,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(42, 50, 61, 0); border-bottom-color: #2a323d; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(63, 75, 91, 0); border-bottom-color: #3c4756; } @@ -3924,6 +6701,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -3949,6 +6863,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3978,14 +6893,12 @@ background: #2a323d; color: rgba(255, 255, 255, 0.87); padding: 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3993,6 +6906,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4019,12 +7002,12 @@ color: #151515; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(42, 50, 61, 0); border-bottom-color: #2a323d; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(63, 75, 91, 0); border-bottom-color: #3c4756; } @@ -4035,6 +7018,159 @@ border-top-color: #3f4b5b; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4044,6 +7180,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4053,6 +7193,7 @@ background: transparent; border-radius: 50%; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4073,6 +7214,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4093,6 +7289,50 @@ border-bottom-color: #3f4b5b; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4157,6 +7397,38 @@ border-color: #9954bb; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4166,6 +7438,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4189,6 +7462,48 @@ color: rgba(255, 255, 255, 0.87); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4196,7 +7511,7 @@ border: 1px solid #3f4b5b; box-shadow: none; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4208,6 +7523,15 @@ box-shadow: none; border-radius: 4px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4243,7 +7567,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4251,6 +7575,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4273,6 +7607,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4321,27 +7761,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #343e4d; @@ -4352,6 +7951,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4387,7 +7995,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4395,6 +8003,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4410,6 +8028,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; box-shadow: none; + border-radius: 4px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4422,14 +8041,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4462,6 +8081,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.5rem 0; + background: #2a323d; + border: 1px solid #3f4b5b; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #3f4b5b; + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.15s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.15s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4469,7 +8158,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4506,7 +8204,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4514,6 +8212,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4543,6 +8251,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4583,6 +8397,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4618,7 +8441,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4626,6 +8449,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4641,7 +8474,8 @@ background: #2a323d; border: 1px solid #3f4b5b; box-shadow: none; - width: 12.5rem; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #3f4b5b; @@ -4650,95 +8484,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.15s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.15s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4748,6 +8586,7 @@ background: #2a323d; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4797,6 +8636,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.15s; @@ -4832,7 +8680,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4840,6 +8688,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4888,11 +8746,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4933,6 +8845,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -4953,6 +8905,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4973,13 +8926,62 @@ color: rgba(255, 255, 255, 0.6); } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2a323d; @@ -4994,6 +8996,16 @@ background: #2a323d; border: 1px solid #3f4b5b; box-shadow: none; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5030,7 +9042,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5038,6 +9050,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5060,6 +9082,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5112,6 +9154,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5125,6 +9216,7 @@ border-radius: 50%; background: transparent; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5195,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5229,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5279,6 +9445,290 @@ color: #721c24; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5380,6 +9830,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5390,6 +9843,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5436,6 +9963,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5461,6 +10027,39 @@ border: 2px solid #2a323d; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #c298d8; color: #151515; @@ -5503,6 +10102,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -5527,6 +10164,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5537,10 +10175,29 @@ outline: 0 none; } + .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 .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5552,6 +10209,210 @@ box-shadow: 0 0 0 1px #f0e6f5; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #3f4b5b; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #c298d8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #c298d8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5568,6 +10429,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5613,6 +10500,67 @@ stroke: #856404; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5635,6 +10583,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5643,6 +10623,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #c298d8; color: #151515; @@ -5668,14 +10664,39 @@ color: #151515; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 2d5927c..9b9e477 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #007bff; @@ -419,10 +643,6 @@ background: #0067d6; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 4px; transition: box-shadow 0.15s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #0067d6; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #efefef; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #efefef; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #efefef; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007bff; background: #007bff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #ced4da; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0062cc; - background: #0062cc; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007bff; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0062cc; } @@ -806,6 +1324,52 @@ border-color: #ffffff; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #dc3545; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #0067d6; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #efefef; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #efefef; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #efefef; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #efefef; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #efefef; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #efefef; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #ced4da; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #007bff; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #007bff; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #dc3545; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #dc3545; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #495057; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #495057; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1205,12 +2137,68 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; - background: #dee2e6; + 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; @@ -1277,11 +2275,118 @@ border-color: #dc3545; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #0067d6; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #efefef; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #efefef; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #efefef; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ced4da; - } - .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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.15s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007bff; background: #007bff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007bff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - border-color: #007bff; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #007bff; @@ -1586,6 +2796,44 @@ border-color: #dc3545; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e9ecef; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #007bff; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { 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; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #0069d9; border-color: #0069d9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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-treeselect:not(.p-disabled):hover { border-color: #ced4da; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .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; @@ -1696,53 +3016,152 @@ background-color: #efefef; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #dc3545; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #007bff; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #0069d9; color: #ffffff; border-color: #0069d9; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #0062cc; color: #ffffff; border-color: #0062cc; @@ -1767,12 +3187,12 @@ color: #007bff; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 123, 255, 0.16); color: #007bff; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1794,12 +3214,12 @@ color: #007bff; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(0, 123, 255, 0.16); color: #007bff; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -1888,331 +3308,457 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #5a6268; color: #ffffff; border-color: #5a6268; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #545b62; color: #ffffff; border-color: #4e555b; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #6c757d; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #138496; color: #ffffff; border-color: #117a8b; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #138496; color: #ffffff; border-color: #117a8b; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #17a2b8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #218838; color: #ffffff; border-color: #1e7e34; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #1e7e34; color: #ffffff; border-color: #1c7430; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #28a745; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #e0a800; color: #212529; border-color: #d39e00; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #d39e00; color: #212529; border-color: #c69500; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffc107; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #633bad; color: #ffffff; border-color: #58349a; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #d3c6ec; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #58349a; color: #ffffff; border-color: #4d2e87; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #6f42c1; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c82333; color: #ffffff; border-color: #bd2130; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #bd2130; color: #ffffff; border-color: #b21f2d; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #dc3545; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #0069d9; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #007bff; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3786,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: box-shadow 0.15s; } .p-speeddial-action:hover { background: #343a40; @@ -2292,263 +3840,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 123, 255, 0.04); - color: #007bff; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 123, 255, 0.04); - color: #007bff; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #6c757d; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - border-color: transparent; - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(108, 117, 125, 0.16); - border-color: transparent; - color: #6c757d; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(23, 162, 184, 0.04); - color: #17a2b8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(23, 162, 184, 0.04); - border-color: transparent; - color: #17a2b8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(23, 162, 184, 0.16); - border-color: transparent; - color: #17a2b8; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(40, 167, 69, 0.04); - color: #28a745; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(40, 167, 69, 0.04); - border-color: transparent; - color: #28a745; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(40, 167, 69, 0.16); - border-color: transparent; - color: #28a745; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - color: #ffc107; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - border-color: transparent; - color: #ffc107; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 193, 7, 0.16); - border-color: transparent; - color: #ffc107; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(111, 66, 193, 0.04); - color: #6f42c1; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(111, 66, 193, 0.04); - border-color: transparent; - color: #6f42c1; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(111, 66, 193, 0.16); - border-color: transparent; - color: #6f42c1; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #dc3545; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(220, 53, 69, 0.04); - color: #dc3545; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(220, 53, 69, 0.16); - color: #dc3545; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #dc3545; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(220, 53, 69, 0.04); - border-color: transparent; - color: #dc3545; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(220, 53, 69, 0.16); - border-color: transparent; - color: #dc3545; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3965,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +4002,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2699,6 +4340,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .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, @@ -2730,6 +4372,10 @@ 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; } @@ -2809,17 +4455,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4521,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; @@ -2903,6 +4545,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2931,6 +4574,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2963,6 +4607,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #007bff; @@ -3010,31 +4660,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #efefef; - color: #212529; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: #212529; 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-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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3043,13 +4738,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #212529; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #212529; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3065,6 +4770,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3097,6 +4855,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4863,46 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #007bff; @@ -3186,31 +4985,72 @@ color: #007bff; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: #212529; 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-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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3219,13 +5059,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #212529; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #212529; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3241,6 +5091,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5227,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3296,6 +5339,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3314,7 +5358,7 @@ .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 { + .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 { @@ -3355,6 +5399,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3447,6 +5660,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5676,7 @@ .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 { + .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 { @@ -3552,6 +5766,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3560,6 +5791,7 @@ font-weight: 600; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3652,6 +5884,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3675,6 +5926,7 @@ color: #212529; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3696,6 +5948,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3704,7 +6012,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3714,12 +6022,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -3739,6 +6067,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3774,10 +6103,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3785,6 +6171,66 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3798,6 +6244,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3808,6 +6255,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3828,6 +6513,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3850,6 +6536,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3865,6 +6552,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -3876,6 +6583,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -3898,12 +6675,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.2); } @@ -3924,6 +6701,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -3949,6 +6863,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3978,14 +6893,12 @@ background: #ffffff; color: #212529; padding: 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3993,6 +6906,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4019,12 +7002,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.2); } @@ -4035,6 +7018,159 @@ border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #212529; @@ -4044,6 +7180,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4053,6 +7193,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4073,6 +7214,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4093,6 +7289,50 @@ border-bottom-color: #212529; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4157,6 +7397,38 @@ border-color: #0062cc; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4166,6 +7438,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4189,6 +7462,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4196,7 +7511,7 @@ border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4208,6 +7523,15 @@ box-shadow: none; border-radius: 4px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4243,7 +7567,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4251,6 +7575,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4273,6 +7607,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4321,27 +7761,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #efefef; @@ -4352,6 +7951,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4387,7 +7995,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4395,6 +8003,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4410,6 +8028,7 @@ color: #212529; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; + border-radius: 4px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4422,14 +8041,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4462,6 +8081,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 1rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + transition: box-shadow 0.15s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.7); + background: transparent; + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.15s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.15s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4469,7 +8158,16 @@ color: #212529; border: 1px solid #dee2e6; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #212529; @@ -4506,7 +8204,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4514,6 +8212,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4543,6 +8251,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4583,6 +8397,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4618,7 +8441,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4626,6 +8449,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4641,7 +8474,8 @@ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; - width: 12.5rem; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4650,95 +8484,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.15s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.15s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4748,6 +8586,7 @@ background: #efefef; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #212529; @@ -4797,6 +8636,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4832,7 +8680,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4840,6 +8688,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4888,11 +8746,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #212529; @@ -4933,6 +8845,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -4953,6 +8905,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4973,13 +8926,62 @@ color: #495057; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; color: #212529; border: 1px solid #dee2e6; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4994,6 +8996,16 @@ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #212529; @@ -5030,7 +9042,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -5038,6 +9050,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5060,6 +9082,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5112,6 +9154,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5125,6 +9216,7 @@ border-radius: 50%; background: transparent; transition: box-shadow 0.15s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5195,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5229,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: box-shadow 0.15s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5279,6 +9445,290 @@ color: #721c24; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5380,6 +9830,9 @@ background: rgba(255, 255, 255, 0.1); color: #efefef; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5390,6 +9843,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5436,6 +9963,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5461,6 +10027,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007bff; color: #ffffff; @@ -5503,6 +10102,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #212529; @@ -5527,6 +10164,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5537,10 +10175,29 @@ outline: 0 none; } + .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 .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5552,6 +10209,210 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e9ecef; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007bff; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #007bff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5568,6 +10429,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5613,6 +10500,67 @@ stroke: #856404; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5635,6 +10583,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -5643,6 +10623,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #007bff; color: #ffffff; @@ -5668,14 +10664,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #212529; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index c03241c..4a5205f 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #883cae; @@ -419,10 +643,6 @@ background: #703290; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 4px; transition: box-shadow 0.15s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #703290; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #efefef; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #efefef; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #efefef; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #883cae; background: #883cae; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #ced4da; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #68329e; - background: #68329e; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #883cae; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #68329e; } @@ -806,6 +1324,52 @@ border-color: #ffffff; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #dc3545; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #703290; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #efefef; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #efefef; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #efefef; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #efefef; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #efefef; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #efefef; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #ced4da; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #883cae; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #883cae; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #dc3545; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #dc3545; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #495057; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #495057; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1205,12 +2137,68 @@ padding: 0.625rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; - background: #dee2e6; + 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; @@ -1277,11 +2275,118 @@ border-color: #dc3545; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #703290; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #212529; - background: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #efefef; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #efefef; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #efefef; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ced4da; - } - .p-radiobutton .p-radiobutton-box: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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.15s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #883cae; background: #883cae; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #883cae; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - border-color: #883cae; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #883cae; @@ -1586,6 +2796,44 @@ border-color: #dc3545; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e9ecef; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #883cae; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { 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; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #7a38a7; border-color: #7a38a7; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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-treeselect:not(.p-disabled):hover { border-color: #ced4da; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); border-color: #883cae; } + .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; @@ -1696,53 +3016,152 @@ background-color: #efefef; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; - color: #ffffff; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #545b62; - border-color: #4e555b; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #dc3545; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #883cae; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #7a38a7; color: #ffffff; border-color: #7a38a7; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #68329e; color: #ffffff; border-color: #68329e; @@ -1767,12 +3187,12 @@ color: #883cae; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(136, 60, 174, 0.16); color: #883cae; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1794,12 +3214,12 @@ color: #883cae; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(136, 60, 174, 0.16); color: #883cae; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -1888,331 +3308,457 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #5a6268; color: #ffffff; border-color: #5a6268; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #545b62; color: #ffffff; border-color: #4e555b; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #6c757d; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #138496; color: #ffffff; border-color: #117a8b; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #138496; color: #ffffff; border-color: #117a8b; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #17a2b8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #218838; color: #ffffff; border-color: #1e7e34; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #1e7e34; color: #ffffff; border-color: #1c7430; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #28a745; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #e0a800; color: #212529; border-color: #d39e00; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #d39e00; color: #212529; border-color: #c69500; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffc107; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #633bad; color: #ffffff; border-color: #58349a; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #d3c6ec; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #58349a; color: #ffffff; border-color: #4d2e87; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #6f42c1; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c82333; color: #ffffff; border-color: #bd2130; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #bd2130; color: #ffffff; border-color: #b21f2d; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #dc3545; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #7a38a7; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #883cae; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3786,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: box-shadow 0.15s; } .p-speeddial-action:hover { background: #343a40; @@ -2292,263 +3840,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(136, 60, 174, 0.04); - color: #883cae; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(136, 60, 174, 0.04); - color: #883cae; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #6c757d; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(108, 117, 125, 0.04); - border-color: transparent; - color: #6c757d; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(108, 117, 125, 0.16); - border-color: transparent; - color: #6c757d; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(23, 162, 184, 0.04); - color: #17a2b8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(23, 162, 184, 0.04); - border-color: transparent; - color: #17a2b8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(23, 162, 184, 0.16); - border-color: transparent; - color: #17a2b8; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(40, 167, 69, 0.04); - color: #28a745; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(40, 167, 69, 0.04); - border-color: transparent; - color: #28a745; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(40, 167, 69, 0.16); - border-color: transparent; - color: #28a745; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - color: #ffc107; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - border-color: transparent; - color: #ffc107; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 193, 7, 0.16); - border-color: transparent; - color: #ffc107; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(111, 66, 193, 0.04); - color: #6f42c1; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(111, 66, 193, 0.04); - border-color: transparent; - color: #6f42c1; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(111, 66, 193, 0.16); - border-color: transparent; - color: #6f42c1; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #dc3545; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(220, 53, 69, 0.04); - color: #dc3545; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(220, 53, 69, 0.16); - color: #dc3545; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #dc3545; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(220, 53, 69, 0.04); - border-color: transparent; - color: #dc3545; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(220, 53, 69, 0.16); - border-color: transparent; - color: #dc3545; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3965,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +4002,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2699,6 +4340,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .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, @@ -2730,6 +4372,10 @@ 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; } @@ -2809,17 +4455,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4521,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; @@ -2903,6 +4545,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2931,6 +4574,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2963,6 +4607,12 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #883cae; @@ -3010,31 +4660,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #efefef; - color: #212529; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: #212529; 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-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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3043,13 +4738,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #212529; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #212529; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3065,6 +4770,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3097,6 +4855,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4863,46 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #883cae; @@ -3186,31 +4985,72 @@ color: #883cae; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: #212529; 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-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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; margin: 0; @@ -3219,13 +5059,23 @@ background: transparent; transition: transform 0.15s, box-shadow 0.15s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #212529; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #212529; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3241,6 +5091,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5227,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3296,6 +5339,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3314,7 +5358,7 @@ .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 { + .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 { @@ -3355,6 +5399,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3447,6 +5660,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5676,7 @@ .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 { + .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 { @@ -3552,6 +5766,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3560,6 +5791,7 @@ font-weight: 600; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3652,6 +5884,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3675,6 +5926,7 @@ color: #212529; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3696,6 +5948,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3704,7 +6012,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3714,12 +6022,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -3739,6 +6067,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3774,10 +6103,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3785,6 +6171,66 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3798,6 +6244,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3808,6 +6255,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3828,6 +6513,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3850,6 +6536,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3865,6 +6552,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -3876,6 +6583,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -3898,12 +6675,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.2); } @@ -3924,6 +6701,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -3949,6 +6863,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3978,14 +6893,12 @@ background: #ffffff; color: #212529; padding: 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3993,6 +6906,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4019,12 +7002,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.2); } @@ -4035,6 +7018,159 @@ border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #212529; @@ -4044,6 +7180,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4053,6 +7193,7 @@ background: transparent; border-radius: 50%; transition: box-shadow 0.15s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4073,6 +7214,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4093,6 +7289,50 @@ border-bottom-color: #212529; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4157,6 +7397,38 @@ border-color: #68329e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4166,6 +7438,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4189,6 +7462,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4196,7 +7511,7 @@ border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4208,6 +7523,15 @@ box-shadow: none; border-radius: 4px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4243,7 +7567,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4251,6 +7575,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4273,6 +7607,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4321,27 +7761,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem 1rem; background: #efefef; @@ -4352,6 +7951,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4387,7 +7995,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4395,6 +8003,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4410,6 +8028,7 @@ color: #212529; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; + border-radius: 4px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4422,14 +8041,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4462,6 +8081,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem 1rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + transition: box-shadow 0.15s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.7); + background: transparent; + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.15s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.15s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4469,7 +8158,16 @@ color: #212529; border: 1px solid #dee2e6; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #212529; @@ -4506,7 +8204,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4514,6 +8212,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4543,6 +8251,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4583,6 +8397,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4618,7 +8441,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -4626,6 +8449,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4641,7 +8474,8 @@ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; - width: 12.5rem; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4650,95 +8484,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.15s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.15s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4748,6 +8586,7 @@ background: #efefef; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #212529; @@ -4797,6 +8636,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #212529; transition: box-shadow 0.15s; @@ -4832,7 +8680,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4840,6 +8688,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4888,11 +8746,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #212529; @@ -4933,6 +8845,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -4953,6 +8905,7 @@ border-top-left-radius: 4px; transition: box-shadow 0.15s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4973,13 +8926,62 @@ color: #495057; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; color: #212529; border: 1px solid #dee2e6; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4994,6 +8996,16 @@ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: none; + border-radius: 4px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #212529; @@ -5030,7 +9042,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #212529; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #212529; @@ -5038,6 +9050,16 @@ .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-focus > .p-menuitem-content:hover { + color: #212529; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #212529; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5060,6 +9082,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5112,6 +9154,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5125,6 +9216,7 @@ border-radius: 50%; background: transparent; transition: box-shadow 0.15s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5195,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5229,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: box-shadow 0.15s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5279,6 +9445,290 @@ color: #721c24; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5380,6 +9830,9 @@ background: rgba(255, 255, 255, 0.1); color: #efefef; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5390,6 +9843,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5436,6 +9963,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5461,6 +10027,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #883cae; color: #ffffff; @@ -5503,6 +10102,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #212529; @@ -5527,6 +10164,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: box-shadow 0.15s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5537,10 +10175,29 @@ outline: 0 none; } + .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 .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5552,6 +10209,210 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e9ecef; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #883cae; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #883cae; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5568,6 +10429,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5613,6 +10500,67 @@ stroke: #856404; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5635,6 +10583,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -5643,6 +10623,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #883cae; color: #ffffff; @@ -5668,14 +10664,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #212529; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 511ce81..e97ec44 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 2px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #323130; background: #edebe9; @@ -419,10 +643,6 @@ background: #e1dfdd; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #323130; - background: #e1dfdd; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; background: #f3f2f1; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 2px; transition: box-shadow 0.2s; border: 0 none; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #323130; @@ -566,6 +938,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #605e5c; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f2f1; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f2f1; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f2f1; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #e1dfdd; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #323130; - background: #e1dfdd; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; background: #f3f2f1; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #faf9f8; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #faf9f8; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #faf9f8; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #605e5c; + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border: 1px solid #605e5c; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #0078d4; background: #0078d4; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #323130; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005a9e; - background: #005a9e; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #0078d4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #a4252c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ background: #e1dfdd; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #323130; - background: #e1dfdd; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #faf9f8; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #faf9f8; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #faf9f8; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #faf9f8; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #faf9f8; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #faf9f8; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #0078d4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #005a9e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a4252c; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #a4252c; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: #605e5c; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: #605e5c; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; - background: #e1dfdd; + 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; @@ -1273,11 +2271,118 @@ border-color: #a4252c; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #605e5c; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ background: #e1dfdd; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #323130; - background: #e1dfdd; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; background: #f3f2f1; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #faf9f8; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #faf9f8; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #faf9f8; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #323130; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #323130; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #0078d4; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #0078d4; background: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #005a9e; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #faf9f8; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #323130; @@ -1574,6 +2784,44 @@ border-color: #a4252c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c8c6c4; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #605e5c; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } .p-slider .p-slider-range { background: #605e5c; + border-radius: 2px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #ffffff; border-color: #005a9e; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #323130; @@ -1629,6 +2940,15 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .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; @@ -1684,53 +3004,152 @@ background-color: #faf9f8; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #605e5c; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f2f1; - border-color: #605e5c; - color: #323130; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #605e5c; - } - .p-togglebutton.p-button.p-highlight { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #323130; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #edebe9; - border-color: #605e5c; - color: #323130; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #323130; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #a4252c; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #0078d4; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #106ebe; color: #ffffff; border-color: #106ebe; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #005a9e; color: #ffffff; border-color: #005a9e; @@ -1755,12 +3175,12 @@ color: #0078d4; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 120, 212, 0.16); color: #0078d4; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #605e5c; border-color: #605e5c; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f2f1; color: #605e5c; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #edebe9; color: #605e5c; } @@ -1782,12 +3202,12 @@ color: #0078d4; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(0, 120, 212, 0.16); color: #0078d4; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #605e5c; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f2f1; color: #605e5c; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #edebe9; color: #605e5c; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #d45c00; border: 1px solid #d45c00; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #bf5300; color: #ffffff; border-color: #bf5300; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffbc88; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #aa4a00; color: #ffffff; border-color: #aa4a00; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #d45c00; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(212, 92, 0, 0.04); color: #d45c00; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(212, 92, 0, 0.16); color: #d45c00; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #d45c00; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(212, 92, 0, 0.04); border-color: transparent; color: #d45c00; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(212, 92, 0, 0.16); border-color: transparent; color: #d45c00; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #00b7c3; border: 1px solid #00b7c3; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #00a5b0; color: #ffffff; border-color: #00a5b0; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #81f7ff; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #00929c; color: #ffffff; border-color: #00929c; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #00b7c3; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(0, 183, 195, 0.04); color: #00b7c3; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(0, 183, 195, 0.16); color: #00b7c3; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #00b7c3; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(0, 183, 195, 0.04); border-color: transparent; color: #00b7c3; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(0, 183, 195, 0.16); border-color: transparent; color: #00b7c3; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #498205; border: 1px solid #498205; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #427505; color: #ffffff; border-color: #427505; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #baf96f; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #3a6804; color: #ffffff; border-color: #3a6804; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #498205; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(73, 130, 5, 0.04); color: #498205; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(73, 130, 5, 0.16); color: #498205; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #498205; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(73, 130, 5, 0.04); border-color: transparent; color: #498205; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(73, 130, 5, 0.16); border-color: transparent; color: #498205; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #323130; background: #ffaa44; border: 1px solid #ffaa44; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ff9b24; color: #323130; border-color: #ff9b24; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffddb4; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ff8d03; color: #323130; border-color: #ff8d03; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffaa44; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 170, 68, 0.04); color: #ffaa44; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 170, 68, 0.16); color: #ffaa44; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffaa44; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 170, 68, 0.04); border-color: transparent; color: #ffaa44; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 170, 68, 0.16); border-color: transparent; color: #ffaa44; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #8378de; border: 1px solid #8378de; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #6a5dd7; color: #ffffff; border-color: #6a5dd7; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #cdc9f2; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #5141d1; color: #ffffff; border-color: #5141d1; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #8378de; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(131, 120, 222, 0.04); color: #8378de; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(131, 120, 222, 0.16); color: #8378de; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #8378de; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(131, 120, 222, 0.04); border-color: transparent; color: #8378de; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(131, 120, 222, 0.16); border-color: transparent; color: #8378de; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d13438; border: 1px solid #d13438; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c02b2f; color: #ffffff; border-color: #c02b2f; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #edaeaf; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #aa272a; color: #ffffff; border-color: #aa272a; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #d13438; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(209, 52, 56, 0.04); color: #d13438; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(209, 52, 56, 0.16); color: #d13438; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #d13438; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(209, 52, 56, 0.04); border-color: transparent; color: #d13438; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(209, 52, 56, 0.16); border-color: transparent; color: #d13438; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #005a9e; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #0078d4; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #323130; color: #ffffff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #605e5c; @@ -2280,263 +3779,120 @@ border-radius: 2px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 120, 212, 0.04); - color: #0078d4; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f2f1; - color: #605e5c; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 120, 212, 0.04); - color: #0078d4; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f2f1; - color: #605e5c; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #d45c00; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(212, 92, 0, 0.04); - color: #d45c00; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(212, 92, 0, 0.04); - border-color: transparent; - color: #d45c00; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(212, 92, 0, 0.16); - border-color: transparent; - color: #d45c00; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 183, 195, 0.04); - color: #00b7c3; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 183, 195, 0.04); - border-color: transparent; - color: #00b7c3; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(0, 183, 195, 0.16); - border-color: transparent; - color: #00b7c3; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(73, 130, 5, 0.04); - color: #498205; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(73, 130, 5, 0.04); - border-color: transparent; - color: #498205; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(73, 130, 5, 0.16); - border-color: transparent; - color: #498205; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 170, 68, 0.04); - color: #ffaa44; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 170, 68, 0.04); - border-color: transparent; - color: #ffaa44; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 170, 68, 0.16); - border-color: transparent; - color: #ffaa44; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(131, 120, 222, 0.04); - color: #8378de; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(131, 120, 222, 0.04); - border-color: transparent; - color: #8378de; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(131, 120, 222, 0.16); - border-color: transparent; - color: #8378de; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #d13438; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(209, 52, 56, 0.04); - color: #d13438; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(209, 52, 56, 0.16); - color: #d13438; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #d13438; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(209, 52, 56, 0.04); - border-color: transparent; - color: #d13438; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(209, 52, 56, 0.16); - border-color: transparent; - color: #d13438; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #323130; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #faf9f8; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #323130; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f3f2f1; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #323130; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #605e5c; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #605e5c; @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #323130; background: #edebe9; @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #faf9f8; - color: #323130; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #a19f9d; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } + .p-orderlist .p-orderlist-header { + color: #323130; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; } .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:not(:first-child) { + border-top: 1px solid #a19f9d; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.5rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f2f1; color: #323130; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #323130; + background: #f3f2f1; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #323130; @@ -3053,6 +4709,59 @@ background: #f3f2f1; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f2f1; color: #323130; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #605e5c; @@ -3174,31 +4924,72 @@ color: #323130; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #a19f9d; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } + .p-picklist .p-picklist-header { + color: #323130; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 2px; - border-top-left-radius: 2px; } .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:not(:first-child) { + border-top: 1px solid #a19f9d; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.5rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f2f1; color: #323130; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #323130; + background: #f3f2f1; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #323130; @@ -3229,6 +5030,117 @@ background: #f3f2f1; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #a19f9d; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #605e5c; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #a19f9d; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 2px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3615,6 +5798,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #a19f9d; background: #ffffff; @@ -3638,6 +5840,7 @@ color: #323130; border-radius: 2px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3659,6 +5862,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3667,7 +5926,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #edebe9; + border-top: 1px solid #edebe9; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3677,12 +5936,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #edebe9; + border-left: 1px solid #edebe9; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #a19f9d; padding: 1rem; @@ -3702,6 +5981,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #605e5c; @@ -3737,10 +6017,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3748,6 +6085,66 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #a19f9d; background: #ffffff; @@ -3761,6 +6158,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #edebe9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3771,6 +6169,238 @@ background: #edebe9; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3791,6 +6421,7 @@ border-top-left-radius: 2px; transition: box-shadow 0.2s; margin: 0 0.5rem -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3813,6 +6444,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3828,6 +6460,26 @@ border-bottom-left-radius: 2px; } + .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; + } + .p-toolbar { background: #faf9f8; border: 1px solid #a19f9d; @@ -3839,6 +6491,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #323130; @@ -3861,12 +6583,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3887,6 +6609,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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; @@ -3912,6 +6771,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3941,14 +6801,12 @@ background: #ffffff; color: #323130; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3956,6 +6814,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #323130; @@ -3982,12 +6910,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3998,6 +6926,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #323130; @@ -4007,6 +7088,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.5rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4016,6 +7101,7 @@ background: transparent; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4036,6 +7122,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #ffffff; color: #323130; @@ -4056,6 +7197,50 @@ border-bottom-color: #ffffff; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #faf9f8; padding: 1rem; @@ -4120,6 +7305,38 @@ border-color: #005a9e; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #eeeeee; @@ -4129,6 +7346,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4152,6 +7370,48 @@ color: #0078d4; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4159,7 +7419,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4171,6 +7431,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #323130; transition: box-shadow 0.2s; @@ -4206,7 +7475,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #323130; @@ -4214,6 +7483,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #323130; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4236,6 +7515,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4284,27 +7669,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4315,6 +7859,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #323130; transition: box-shadow 0.2s; @@ -4350,7 +7903,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #323130; @@ -4358,6 +7911,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #323130; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4373,6 +7936,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4385,14 +7949,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4425,6 +7989,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #0078d4; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #0078d4; + background: #f3f2f1; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #edebe9; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0; @@ -4432,7 +8066,16 @@ color: #323130; border: 1px solid #eeeeee; border-radius: 2px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #323130; @@ -4469,7 +8112,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #323130; @@ -4477,6 +8120,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #323130; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4506,6 +8159,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4546,6 +8305,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #323130; transition: box-shadow 0.2s; @@ -4581,7 +8349,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #323130; @@ -4589,6 +8357,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #323130; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4604,7 +8382,8 @@ 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; + min-width: 12.5rem; + border-radius: 2px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #edebe9; @@ -4613,95 +8392,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4711,6 +8494,7 @@ background: #faf9f8; border-radius: 2px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #323130; @@ -4760,6 +8544,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #323130; transition: box-shadow 0.2s; @@ -4795,7 +8588,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .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; @@ -4803,6 +8596,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4827,11 +8630,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 2px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #323130; @@ -4872,6 +8729,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 0 none; @@ -4892,6 +8789,7 @@ border-top-left-radius: 2px; transition: box-shadow 0.2s; margin: 0 0.5rem -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4912,13 +8810,62 @@ color: #323130; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #323130; border: 1px solid #eeeeee; border-radius: 2px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4933,6 +8880,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #323130; @@ -4969,7 +8926,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #323130; - background: #e1dfdd; + background: #f3f2f1; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #323130; @@ -4977,6 +8934,16 @@ .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-focus > .p-menuitem-content:hover { + color: #323130; + background: #f3f2f1; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #323130; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #0078d4; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #323130; background: #f3f2f1; @@ -4999,6 +8966,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5051,6 +9038,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5064,6 +9100,7 @@ border-radius: 2px; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5134,6 +9171,79 @@ height: 1rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5168,6 +9278,7 @@ border-radius: 2px; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5218,6 +9329,290 @@ color: #a80000; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5319,6 +9714,9 @@ background: rgba(255, 255, 255, 0.1); color: #faf9f8; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5329,6 +9727,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5375,6 +9847,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #edebe9; border-radius: 2px; @@ -5400,6 +9911,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #0078d4; color: #ffffff; @@ -5442,6 +9986,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 2px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #edebe9; color: #323130; @@ -5466,6 +10048,7 @@ margin-left: 0.5rem; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5476,10 +10059,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f3f2f1; @@ -5491,6 +10093,210 @@ box-shadow: inset 0 0 0 1px #605e5c; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #edebe9; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #0078d4; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #0078d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 2px; @@ -5507,6 +10313,32 @@ line-height: 2px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5552,6 +10384,67 @@ stroke: #323130; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5574,6 +10467,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #edebe9; border-radius: 2px; @@ -5582,6 +10507,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #0078d4; color: #ffffff; @@ -5607,14 +10548,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #323130; diff --git a/public/themes/lara-dark-amber/fonts/Inter-italic.var.woff2 b/public/themes/lara-dark-amber/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-dark-amber/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-dark-amber/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-amber/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-dark-amber/fonts/Inter-roman.var.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 0000000..c1d4d75 --- /dev/null +++ b/public/themes/lara-dark-amber/theme.css @@ -0,0 +1,10845 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #fbbf24; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-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-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #424b57; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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); + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + 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; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #fbbf24; + border-color: #fbbf24; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: rgba(255, 255, 255, 0.87); + color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: rgba(255, 255, 255, 0.6); + color: #111827; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid rgba(251, 191, 36, 0.2); + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):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 > .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #1f2937; + 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #1f2937; + 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1c2532; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-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-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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: rgba(255, 255, 255, 0.87); + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #424b57; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #424b57; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #424b57; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #fbbf24; + background-color: rgba(251, 191, 36, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #424b57; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #fcd34d; + color: #030712; + border-color: #fcd34d; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #fde68a; + color: #030712; + border-color: #fde68a; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.25rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + 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-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: 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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #1f2937; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fbbf24; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #fbbf24; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #fca5a5; + 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: #fca5a5; + } + 40% { + stroke: #93c5fd; + } + 66% { + stroke: #6ee7b7; + } + 80%, 90% { + stroke: #fde047; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .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/theme.css b/public/themes/lara-dark-blue/theme.css index b9dc407..2903019 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -2,18 +2,18 @@ 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; + --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; @@ -35,15 +35,15 @@ --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,.1); - --surface-hover:rgba(255,255,255,.03); + --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); @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -311,7 +431,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -408,7 +626,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -438,10 +662,6 @@ background: rgba(96, 165, 250, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: #424b57; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -453,8 +673,158 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -654,6 +1034,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -662,6 +1045,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -711,7 +1192,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -732,6 +1213,12 @@ 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); @@ -740,10 +1227,6 @@ 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: #424b57; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #424b57; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #60a5fa; background: #60a5fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #60a5fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #bfdbfe; - background: #bfdbfe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #FCA5A5; + 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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #60a5fa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -859,7 +1424,15 @@ margin: 0; } .p-chips.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); } .p-colorpicker-preview { @@ -880,11 +1453,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -895,6 +1564,18 @@ 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; } @@ -921,7 +1602,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -960,6 +1641,12 @@ 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); @@ -968,13 +1655,14 @@ 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: #424b57; - } - .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.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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1093,28 +2025,30 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #60a5fa; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #030712; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #93c5fd; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { - border-color: #FCA5A5; + + .p-fluid .p-inputtext { + width: 100%; } .p-inputtext { @@ -1128,6 +2062,7 @@ 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; @@ -1139,7 +2074,16 @@ border-color: #60a5fa; } .p-inputtext.p-invalid.p-component { - border-color: #FCA5A5; + 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; @@ -1157,30 +2101,18 @@ } .p-float-label > .p-invalid + label { - color: #FCA5A5; + color: #fca5a5; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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); @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + 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; @@ -1289,7 +2287,113 @@ border-color: #60a5fa; } .p-listbox.p-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .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 { @@ -1297,6 +2401,7 @@ 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; @@ -1307,6 +2412,15 @@ 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; @@ -1332,7 +2446,7 @@ border-bottom-right-radius: 6px; } .p-multiselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1397,6 +2512,12 @@ 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); @@ -1405,10 +2526,6 @@ 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: #424b57; - } - .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.03); } @@ -1428,18 +2545,35 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .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-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #60a5fa; - } - .p-radiobutton .p-radiobutton-box: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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #60a5fa; background: #60a5fa; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #030712; + } + .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; + border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #60a5fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1534,13 +2745,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + 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); - border-color: #60a5fa; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #60a5fa; @@ -1549,7 +2759,7 @@ color: #60a5fa; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1590,7 +2800,45 @@ color: #030712; } .p-selectbutton.p-invalid > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; } .p-slider { @@ -1619,25 +2867,88 @@ border: 2px solid #60a5fa; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { 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; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #60a5fa; border-color: #60a5fa; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #60a5fa; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .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; @@ -1670,7 +2990,7 @@ border-bottom-right-radius: 6px; } .p-treeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1703,51 +3023,150 @@ background-color: #424b57; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); + + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; } - .p-togglebutton.p-button.p-highlight { - background: #60a5fa; - border-color: #60a5fa; - color: #030712; + + .p-button-label { + flex: 1 1 auto; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #030712; + + .p-button-icon-right { + order: 1; } - .p-togglebutton.p-button.p-highlight:hover { - background: #93c5fd; - border-color: #93c5fd; - color: #030712; + + .p-button:disabled { + cursor: default; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #030712; + + .p-button-icon-only { + justify-content: center; } - .p-togglebutton.p-button.p-invalid > .p-button { - border-color: #FCA5A5; + + .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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #93c5fd; color: #030712; border-color: #93c5fd; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #bfdbfe; color: #030712; border-color: #bfdbfe; @@ -1774,12 +3194,12 @@ color: #60a5fa; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 165, 250, 0.16); color: #60a5fa; border: 1px solid; @@ -1788,11 +3208,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1801,12 +3221,12 @@ color: #60a5fa; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(96, 165, 250, 0.16); color: #60a5fa; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -1895,305 +3315,354 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { - color: #1c2127; - background: #CBD5E1; - border: 1px solid #CBD5E1; + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #020617; + background: #94a3b8; + border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { - background: #b0bfd1; - color: #1c2127; - border-color: #b0bfd1; + .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 { + background: #cbd5e1; + color: #020617; + border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #dbe2ea; + .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 { + box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { - background: #95a9c2; - color: #1c2127; - border-color: #95a9c2; + .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 { + background: #e2e8f0; + color: #020617; + border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.04); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.16); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { - background: rgba(203, 213, 225, 0.04); + .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 { + background: rgba(148, 163, 184, 0.04); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { - background: rgba(203, 213, 225, 0.16); + .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 { + background: rgba(148, 163, 184, 0.16); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + color: #082f49; + background: #38bdf8; + border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; + .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 { + background: #7dd3fc; + color: #082f49; + border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #b3d6fe; + .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 { + box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #449bfc; - color: #1c2127; - border-color: #449bfc; + .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 { + background: #bae6fd; + color: #082f49; + border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.04); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.16); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(147, 197, 253, 0.04); + .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 { + background: rgba(56, 189, 248, 0.04); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(147, 197, 253, 0.16); + .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 { + background: rgba(56, 189, 248, 0.16); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { - color: #1c2127; - background: #86EFAC; - border: 1px solid #86EFAC; + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + color: #052e16; + background: #4ade80; + border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #65eb95; - color: #1c2127; - border-color: #65eb95; + .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 { + background: #86efac; + color: #052e16; + border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #aaf4c5; + .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 { + box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #44e67f; - color: #1c2127; - border-color: #44e67f; + .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 { + background: #bbf7d0; + color: #052e16; + border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.04); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.16); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { - background: rgba(134, 239, 172, 0.04); + .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 { + background: rgba(74, 222, 128, 0.04); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { - background: rgba(134, 239, 172, 0.16); + .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 { + background: rgba(74, 222, 128, 0.16); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { - color: #1c2127; - background: #FCD34D; - border: 1px solid #FCD34D; + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + color: #431407; + background: #fb923c; + border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #fbcb2d; - color: #1c2127; - border-color: #fbcb2d; + .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 { + background: #fdba74; + color: #431407; + border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fde082; + .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 { + box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #fbc30c; - color: #1c2127; - border-color: #fbc30c; + .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 { + background: #fed7aa; + color: #431407; + border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.04); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.16); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(252, 211, 77, 0.04); + .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 { + background: rgba(251, 146, 60, 0.04); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(252, 211, 77, 0.16); + .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 { + background: rgba(251, 146, 60, 0.16); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { - color: #1c2127; - background: #D8B4FE; - border: 1px solid #D8B4FE; + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + color: #3b0764; + background: #c084fc; + border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #c289fd; - color: #1c2127; - border-color: #c289fd; + .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 { + background: #d8b4fe; + color: #3b0764; + border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #e4cbfe; + .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 { + box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #ab5efd; - color: #1c2127; - border-color: #ab5efd; + .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 { + background: #e9d5ff; + color: #3b0764; + border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.04); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.16); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { - background: rgba(216, 180, 254, 0.04); + .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 { + background: rgba(192, 132, 252, 0.04); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { - background: rgba(216, 180, 254, 0.16); + .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 { + background: rgba(192, 132, 252, 0.16); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { - color: #1c2127; - background: #FCA5A5; - border: 1px solid #FCA5A5; + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + color: #450a0a; + background: #f87171; + border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #fb7d7d; - color: #1c2127; - border-color: #fb7d7d; + .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 { + background: #fca5a5; + color: #450a0a; + border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fdc0c0; + .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 { + box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #f95454; - color: #1c2127; - border-color: #f95454; + .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 { + background: #fecaca; + color: #450a0a; + border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.04); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.16); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { - background: rgba(252, 165, 165, 0.04); + .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 { + background: rgba(248, 113, 113, 0.04); border-color: transparent; - color: #FCA5A5; + color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { - background: rgba(252, 165, 165, 0.16); + .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 { + background: rgba(248, 113, 113, 0.16); border-color: transparent; - color: #FCA5A5; + 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 { @@ -2201,25 +3670,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #60a5fa; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #60a5fa; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 165, 250, 0.04); - color: #60a5fa; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 165, 250, 0.04); - color: #60a5fa; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #CBD5E1; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #CBD5E1; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - border-color: transparent; - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - border-color: transparent; - color: #CBD5E1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #93C5FD; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #93C5FD; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - border-color: transparent; - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - border-color: transparent; - color: #93C5FD; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #86EFAC; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #86EFAC; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - border-color: transparent; - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - border-color: transparent; - color: #86EFAC; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FCD34D; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #FCD34D; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - border-color: transparent; - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - border-color: transparent; - color: #FCD34D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #D8B4FE; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #D8B4FE; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - border-color: transparent; - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - border-color: transparent; - color: #D8B4FE; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #FCA5A5; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #FCA5A5; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - border-color: transparent; - color: #FCA5A5; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - border-color: transparent; - color: #FCA5A5; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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); } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #1c2532; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3072,6 +4777,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3193,31 +4992,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3248,6 +5098,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #60a5fa; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3657,6 +5908,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #424b57; + border-top: 1px solid #424b57; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #424b57; + border-left: 1px solid #424b57; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #424b57; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4001,12 +6984,12 @@ color: #030712; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -4017,6 +7000,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4075,6 +7271,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #bfdbfe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,6 +7444,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4178,7 +7493,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4190,6 +7505,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4233,6 +7557,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4377,6 +7985,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4392,6 +8010,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4404,14 +8023,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4444,6 +8063,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4451,7 +8140,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4496,6 +8194,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4608,6 +8431,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4623,7 +8456,8 @@ 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; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #1f2937; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .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; + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4822,6 +8670,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #60a5fa; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #374151; @@ -4952,6 +8954,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4996,6 +9008,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #fca5a5; } + .p-inline-message.p-inline-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #fca5a5; } + .p-message.p-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #60a5fa; color: #030712; @@ -5429,24 +10090,32 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #CBD5E1; - color: #1c2127; + background-color: #94a3b8; + color: #020617; } .p-badge.p-badge-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-badge.p-badge-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-badge.p-badge-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-badge.p-badge-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-badge.p-badge-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; } .p-badge.p-badge-lg { font-size: 1.125rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #60a5fa; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #60a5fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #fde047; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #60a5fa; color: #030712; @@ -5610,30 +10676,63 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-tag.p-tag-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-tag.p-tag-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-tag.p-tag-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-tag.p-tag-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5664,6 +10763,10 @@ 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; } @@ -5676,22 +10779,22 @@ 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(203, 213, 225, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(134, 239, 172, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 211, 77, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(216, 180, 254, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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 { @@ -5725,4 +10828,18 @@ .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/Inter-italic.var.woff2 b/public/themes/lara-dark-cyan/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-dark-cyan/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-dark-cyan/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-cyan/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-dark-cyan/fonts/Inter-roman.var.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 0000000..0b7bf14 --- /dev/null +++ b/public/themes/lara-dark-cyan/theme.css @@ -0,0 +1,10845 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #22d3ee; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-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-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #424b57; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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); + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + 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; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #22d3ee; + border-color: #22d3ee; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: rgba(255, 255, 255, 0.87); + color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: rgba(255, 255, 255, 0.6); + color: #111827; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid rgba(34, 211, 238, 0.2); + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):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 > .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #1f2937; + 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #1f2937; + 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1c2532; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-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-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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: rgba(255, 255, 255, 0.87); + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #424b57; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #424b57; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #424b57; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #22d3ee; + background-color: rgba(34, 211, 238, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #424b57; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #67e8f9; + color: #030712; + border-color: #67e8f9; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #a5f3fc; + color: #030712; + border-color: #a5f3fc; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.25rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + 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-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: 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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #1f2937; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #22d3ee; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #22d3ee; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #fca5a5; + 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: #fca5a5; + } + 40% { + stroke: #93c5fd; + } + 66% { + stroke: #6ee7b7; + } + 80%, 90% { + stroke: #fde047; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .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/Inter-italic.var.woff2 b/public/themes/lara-dark-green/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-dark-green/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-dark-green/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-green/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-dark-green/fonts/Inter-roman.var.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 0000000..82f40bf --- /dev/null +++ b/public/themes/lara-dark-green/theme.css @@ -0,0 +1,10845 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #34d399; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-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-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #424b57; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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); + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + 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; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #34d399; + border-color: #34d399; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: rgba(255, 255, 255, 0.87); + color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: rgba(255, 255, 255, 0.6); + color: #111827; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid rgba(52, 211, 153, 0.2); + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):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 > .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #1f2937; + 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #1f2937; + 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1c2532; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-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-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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: rgba(255, 255, 255, 0.87); + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #424b57; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #424b57; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #424b57; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #34d399; + background-color: rgba(52, 211, 153, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #424b57; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #6ee7b7; + color: #030712; + border-color: #6ee7b7; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #a7f3d0; + color: #030712; + border-color: #a7f3d0; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.25rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + 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-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: 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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #1f2937; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #34d399; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #34d399; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #fca5a5; + 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: #fca5a5; + } + 40% { + stroke: #93c5fd; + } + 66% { + stroke: #6ee7b7; + } + 80%, 90% { + stroke: #fde047; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .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/theme.css b/public/themes/lara-dark-indigo/theme.css index a47816d..e764835 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -2,18 +2,18 @@ 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; + --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; @@ -35,15 +35,15 @@ --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,.1); - --surface-hover:rgba(255,255,255,.03); + --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); @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -311,7 +431,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -408,7 +626,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -438,10 +662,6 @@ background: rgba(129, 140, 248, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: #424b57; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -453,8 +673,158 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -654,6 +1034,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -662,6 +1045,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -711,7 +1192,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -732,6 +1213,12 @@ 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); @@ -740,10 +1227,6 @@ 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: #424b57; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #424b57; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #818cf8; background: #818cf8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #818cf8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #c7d2fe; - background: #c7d2fe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #FCA5A5; + 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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #818cf8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -859,7 +1424,15 @@ margin: 0; } .p-chips.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); } .p-colorpicker-preview { @@ -880,11 +1453,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -895,6 +1564,18 @@ 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; } @@ -921,7 +1602,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -960,6 +1641,12 @@ 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); @@ -968,13 +1655,14 @@ 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: #424b57; - } - .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.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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1093,28 +2025,30 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #818cf8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #030712; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #a5b4fc; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { - border-color: #FCA5A5; + + .p-fluid .p-inputtext { + width: 100%; } .p-inputtext { @@ -1128,6 +2062,7 @@ 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; @@ -1139,7 +2074,16 @@ border-color: #818cf8; } .p-inputtext.p-invalid.p-component { - border-color: #FCA5A5; + 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; @@ -1157,30 +2101,18 @@ } .p-float-label > .p-invalid + label { - color: #FCA5A5; + color: #fca5a5; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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); @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + 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; @@ -1289,7 +2287,113 @@ border-color: #818cf8; } .p-listbox.p-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .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 { @@ -1297,6 +2401,7 @@ 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; @@ -1307,6 +2412,15 @@ 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; @@ -1332,7 +2446,7 @@ border-bottom-right-radius: 6px; } .p-multiselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1397,6 +2512,12 @@ 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); @@ -1405,10 +2526,6 @@ 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: #424b57; - } - .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.03); } @@ -1428,18 +2545,35 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .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-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #818cf8; - } - .p-radiobutton .p-radiobutton-box: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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #818cf8; background: #818cf8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #030712; + } + .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; + border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #818cf8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1534,13 +2745,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + 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); - border-color: #818cf8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #818cf8; @@ -1549,7 +2759,7 @@ color: #818cf8; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1590,7 +2800,45 @@ color: #030712; } .p-selectbutton.p-invalid > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; } .p-slider { @@ -1619,25 +2867,88 @@ border: 2px solid #818cf8; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { 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; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #818cf8; border-color: #818cf8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #818cf8; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .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; @@ -1670,7 +2990,7 @@ border-bottom-right-radius: 6px; } .p-treeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1703,51 +3023,150 @@ background-color: #424b57; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); + + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; } - .p-togglebutton.p-button.p-highlight { - background: #818cf8; - border-color: #818cf8; - color: #030712; + + .p-button-label { + flex: 1 1 auto; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #030712; + + .p-button-icon-right { + order: 1; } - .p-togglebutton.p-button.p-highlight:hover { - background: #a5b4fc; - border-color: #a5b4fc; - color: #030712; + + .p-button:disabled { + cursor: default; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #030712; + + .p-button-icon-only { + justify-content: center; } - .p-togglebutton.p-button.p-invalid > .p-button { - border-color: #FCA5A5; + + .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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #a5b4fc; color: #030712; border-color: #a5b4fc; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #c7d2fe; color: #030712; border-color: #c7d2fe; @@ -1774,12 +3194,12 @@ color: #818cf8; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 140, 248, 0.16); color: #818cf8; border: 1px solid; @@ -1788,11 +3208,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1801,12 +3221,12 @@ color: #818cf8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(129, 140, 248, 0.16); color: #818cf8; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -1895,305 +3315,354 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { - color: #1c2127; - background: #CBD5E1; - border: 1px solid #CBD5E1; + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #020617; + background: #94a3b8; + border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { - background: #b0bfd1; - color: #1c2127; - border-color: #b0bfd1; + .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 { + background: #cbd5e1; + color: #020617; + border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #dbe2ea; + .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 { + box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { - background: #95a9c2; - color: #1c2127; - border-color: #95a9c2; + .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 { + background: #e2e8f0; + color: #020617; + border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.04); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.16); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { - background: rgba(203, 213, 225, 0.04); + .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 { + background: rgba(148, 163, 184, 0.04); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { - background: rgba(203, 213, 225, 0.16); + .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 { + background: rgba(148, 163, 184, 0.16); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + color: #082f49; + background: #38bdf8; + border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; + .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 { + background: #7dd3fc; + color: #082f49; + border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #b3d6fe; + .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 { + box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #449bfc; - color: #1c2127; - border-color: #449bfc; + .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 { + background: #bae6fd; + color: #082f49; + border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.04); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.16); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(147, 197, 253, 0.04); + .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 { + background: rgba(56, 189, 248, 0.04); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(147, 197, 253, 0.16); + .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 { + background: rgba(56, 189, 248, 0.16); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { - color: #1c2127; - background: #86EFAC; - border: 1px solid #86EFAC; + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + color: #052e16; + background: #4ade80; + border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #65eb95; - color: #1c2127; - border-color: #65eb95; + .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 { + background: #86efac; + color: #052e16; + border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #aaf4c5; + .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 { + box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #44e67f; - color: #1c2127; - border-color: #44e67f; + .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 { + background: #bbf7d0; + color: #052e16; + border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.04); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.16); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { - background: rgba(134, 239, 172, 0.04); + .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 { + background: rgba(74, 222, 128, 0.04); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { - background: rgba(134, 239, 172, 0.16); + .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 { + background: rgba(74, 222, 128, 0.16); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { - color: #1c2127; - background: #FCD34D; - border: 1px solid #FCD34D; + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + color: #431407; + background: #fb923c; + border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #fbcb2d; - color: #1c2127; - border-color: #fbcb2d; + .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 { + background: #fdba74; + color: #431407; + border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fde082; + .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 { + box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #fbc30c; - color: #1c2127; - border-color: #fbc30c; + .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 { + background: #fed7aa; + color: #431407; + border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.04); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.16); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(252, 211, 77, 0.04); + .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 { + background: rgba(251, 146, 60, 0.04); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(252, 211, 77, 0.16); + .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 { + background: rgba(251, 146, 60, 0.16); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { - color: #1c2127; - background: #D8B4FE; - border: 1px solid #D8B4FE; + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + color: #3b0764; + background: #c084fc; + border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #c289fd; - color: #1c2127; - border-color: #c289fd; + .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 { + background: #d8b4fe; + color: #3b0764; + border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #e4cbfe; + .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 { + box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #ab5efd; - color: #1c2127; - border-color: #ab5efd; + .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 { + background: #e9d5ff; + color: #3b0764; + border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.04); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.16); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { - background: rgba(216, 180, 254, 0.04); + .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 { + background: rgba(192, 132, 252, 0.04); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { - background: rgba(216, 180, 254, 0.16); + .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 { + background: rgba(192, 132, 252, 0.16); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { - color: #1c2127; - background: #FCA5A5; - border: 1px solid #FCA5A5; + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + color: #450a0a; + background: #f87171; + border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #fb7d7d; - color: #1c2127; - border-color: #fb7d7d; + .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 { + background: #fca5a5; + color: #450a0a; + border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fdc0c0; + .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 { + box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #f95454; - color: #1c2127; - border-color: #f95454; + .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 { + background: #fecaca; + color: #450a0a; + border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.04); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.16); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { - background: rgba(252, 165, 165, 0.04); + .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 { + background: rgba(248, 113, 113, 0.04); border-color: transparent; - color: #FCA5A5; + color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { - background: rgba(252, 165, 165, 0.16); + .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 { + background: rgba(248, 113, 113, 0.16); border-color: transparent; - color: #FCA5A5; + 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 { @@ -2201,25 +3670,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #818cf8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #818cf8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 140, 248, 0.04); - color: #818cf8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 140, 248, 0.04); - color: #818cf8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #CBD5E1; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #CBD5E1; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - border-color: transparent; - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - border-color: transparent; - color: #CBD5E1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #93C5FD; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #93C5FD; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - border-color: transparent; - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - border-color: transparent; - color: #93C5FD; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #86EFAC; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #86EFAC; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - border-color: transparent; - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - border-color: transparent; - color: #86EFAC; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FCD34D; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #FCD34D; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - border-color: transparent; - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - border-color: transparent; - color: #FCD34D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #D8B4FE; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #D8B4FE; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - border-color: transparent; - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - border-color: transparent; - color: #D8B4FE; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #FCA5A5; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #FCA5A5; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - border-color: transparent; - color: #FCA5A5; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - border-color: transparent; - color: #FCA5A5; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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); } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #1c2532; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3072,6 +4777,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3193,31 +4992,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3248,6 +5098,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #818cf8; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3657,6 +5908,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #424b57; + border-top: 1px solid #424b57; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #424b57; + border-left: 1px solid #424b57; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #424b57; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4001,12 +6984,12 @@ color: #030712; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -4017,6 +7000,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4075,6 +7271,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #c7d2fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,6 +7444,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4178,7 +7493,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4190,6 +7505,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4233,6 +7557,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4377,6 +7985,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4392,6 +8010,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4404,14 +8023,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4444,6 +8063,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4451,7 +8140,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4496,6 +8194,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4608,6 +8431,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4623,7 +8456,8 @@ 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; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #1f2937; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .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; + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4822,6 +8670,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #818cf8; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #374151; @@ -4952,6 +8954,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4996,6 +9008,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #fca5a5; } + .p-inline-message.p-inline-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #fca5a5; } + .p-message.p-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #818cf8; color: #030712; @@ -5429,24 +10090,32 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #CBD5E1; - color: #1c2127; + background-color: #94a3b8; + color: #020617; } .p-badge.p-badge-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-badge.p-badge-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-badge.p-badge-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-badge.p-badge-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-badge.p-badge-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; } .p-badge.p-badge-lg { font-size: 1.125rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #818cf8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #818cf8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #fde047; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #818cf8; color: #030712; @@ -5610,30 +10676,63 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-tag.p-tag-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-tag.p-tag-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-tag.p-tag-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-tag.p-tag-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5664,6 +10763,10 @@ 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; } @@ -5676,22 +10779,22 @@ 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(203, 213, 225, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(134, 239, 172, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 211, 77, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(216, 180, 254, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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 { @@ -5725,4 +10828,18 @@ .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/Inter-italic.var.woff2 b/public/themes/lara-dark-pink/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-dark-pink/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-dark-pink/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-pink/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-dark-pink/fonts/Inter-roman.var.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 0000000..32bebd7 --- /dev/null +++ b/public/themes/lara-dark-pink/theme.css @@ -0,0 +1,10845 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #f472b6; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-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-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #424b57; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .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.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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); + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + 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; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #f472b6; + border-color: #f472b6; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: rgba(255, 255, 255, 0.87); + color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: rgba(255, 255, 255, 0.6); + color: #111827; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid rgba(244, 114, 182, 0.2); + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):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 > .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #1f2937; + 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #1f2937; + 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #424b57; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #1c2532; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-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-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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: rgba(255, 255, 255, 0.87); + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #424b57; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #424b57; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #424b57; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(31, 41, 55, 0); + border-bottom-color: #1f2937; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #f472b6; + background-color: rgba(244, 114, 182, 0.16); + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #424b57; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #f9a8d4; + color: #030712; + border-color: #f9a8d4; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #fbcfe8; + color: #030712; + border-color: #fbcfe8; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.25rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + 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-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: 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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.25rem 0; + background: #374151; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #424b57; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: rgba(255, 255, 255, 0.03); + } + .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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 { + 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; + } + + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #1f2937; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f472b6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f472b6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #fca5a5; + 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: #fca5a5; + } + 40% { + stroke: #93c5fd; + } + 66% { + stroke: #6ee7b7; + } + 80%, 90% { + stroke: #fde047; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .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/theme.css b/public/themes/lara-dark-purple/theme.css index 492d992..a800d35 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -2,18 +2,18 @@ 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; + --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; @@ -35,15 +35,15 @@ --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,.1); - --surface-hover:rgba(255,255,255,.03); + --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); @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -311,7 +431,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -408,7 +626,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -438,10 +662,6 @@ background: rgba(167, 139, 250, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: #424b57; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -453,8 +673,158 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -654,6 +1034,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -662,6 +1045,9 @@ 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) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -711,7 +1192,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -732,6 +1213,12 @@ 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); @@ -740,10 +1227,6 @@ 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: #424b57; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #424b57; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #a78bfa; background: #a78bfa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #a78bfa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ddd6fe; - background: #ddd6fe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #FCA5A5; + 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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #a78bfa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -859,7 +1424,15 @@ margin: 0; } .p-chips.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); } .p-colorpicker-preview { @@ -880,11 +1453,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -895,6 +1564,18 @@ 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; } @@ -921,7 +1602,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -960,6 +1641,12 @@ 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); @@ -968,13 +1655,14 @@ 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: #424b57; - } - .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.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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1093,28 +2025,30 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #a78bfa; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #030712; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #c4b5fd; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { - border-color: #FCA5A5; + + .p-fluid .p-inputtext { + width: 100%; } .p-inputtext { @@ -1128,6 +2062,7 @@ 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; @@ -1139,7 +2074,16 @@ border-color: #a78bfa; } .p-inputtext.p-invalid.p-component { - border-color: #FCA5A5; + 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; @@ -1157,30 +2101,18 @@ } .p-float-label > .p-invalid + label { - color: #FCA5A5; + color: #fca5a5; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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); @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + 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; @@ -1289,7 +2287,113 @@ border-color: #a78bfa; } .p-listbox.p-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .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 { @@ -1297,6 +2401,7 @@ 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; @@ -1307,6 +2412,15 @@ 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; @@ -1332,7 +2446,7 @@ border-bottom-right-radius: 6px; } .p-multiselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1397,6 +2512,12 @@ 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); @@ -1405,10 +2526,6 @@ 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: #424b57; - } - .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.03); } @@ -1428,18 +2545,35 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .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-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #a78bfa; - } - .p-radiobutton .p-radiobutton-box: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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #a78bfa; background: #a78bfa; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #030712; + } + .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; + border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #a78bfa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1534,13 +2745,12 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + 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); - border-color: #a78bfa; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #a78bfa; @@ -1549,7 +2759,7 @@ color: #a78bfa; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1590,7 +2800,45 @@ color: #030712; } .p-selectbutton.p-invalid > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; } .p-slider { @@ -1619,25 +2867,88 @@ border: 2px solid #a78bfa; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { 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; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #a78bfa; border-color: #a78bfa; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #a78bfa; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .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; @@ -1670,7 +2990,7 @@ border-bottom-right-radius: 6px; } .p-treeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1703,51 +3023,150 @@ background-color: #424b57; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); + + .p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + vertical-align: bottom; + text-align: center; + overflow: hidden; + position: relative; } - .p-togglebutton.p-button.p-highlight { - background: #a78bfa; - border-color: #a78bfa; - color: #030712; + + .p-button-label { + flex: 1 1 auto; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #030712; + + .p-button-icon-right { + order: 1; } - .p-togglebutton.p-button.p-highlight:hover { - background: #c4b5fd; - border-color: #c4b5fd; - color: #030712; + + .p-button:disabled { + cursor: default; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #030712; + + .p-button-icon-only { + justify-content: center; } - .p-togglebutton.p-button.p-invalid > .p-button { - border-color: #FCA5A5; + + .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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #c4b5fd; color: #030712; border-color: #c4b5fd; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #ddd6fe; color: #030712; border-color: #ddd6fe; @@ -1774,12 +3194,12 @@ color: #a78bfa; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(167, 139, 250, 0.16); color: #a78bfa; border: 1px solid; @@ -1788,11 +3208,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1801,12 +3221,12 @@ color: #a78bfa; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(167, 139, 250, 0.16); color: #a78bfa; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -1895,305 +3315,354 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { - color: #1c2127; - background: #CBD5E1; - border: 1px solid #CBD5E1; + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #020617; + background: #94a3b8; + border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { - background: #b0bfd1; - color: #1c2127; - border-color: #b0bfd1; + .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 { + background: #cbd5e1; + color: #020617; + border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #dbe2ea; + .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 { + box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { - background: #95a9c2; - color: #1c2127; - border-color: #95a9c2; + .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 { + background: #e2e8f0; + color: #020617; + border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.04); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.16); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { - background: rgba(203, 213, 225, 0.04); + .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 { + background: rgba(148, 163, 184, 0.04); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { - background: rgba(203, 213, 225, 0.16); + .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 { + background: rgba(148, 163, 184, 0.16); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + color: #082f49; + background: #38bdf8; + border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; + .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 { + background: #7dd3fc; + color: #082f49; + border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #b3d6fe; + .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 { + box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #449bfc; - color: #1c2127; - border-color: #449bfc; + .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 { + background: #bae6fd; + color: #082f49; + border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.04); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.16); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(147, 197, 253, 0.04); + .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 { + background: rgba(56, 189, 248, 0.04); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(147, 197, 253, 0.16); + .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 { + background: rgba(56, 189, 248, 0.16); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { - color: #1c2127; - background: #86EFAC; - border: 1px solid #86EFAC; + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + color: #052e16; + background: #4ade80; + border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #65eb95; - color: #1c2127; - border-color: #65eb95; + .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 { + background: #86efac; + color: #052e16; + border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #aaf4c5; + .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 { + box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #44e67f; - color: #1c2127; - border-color: #44e67f; + .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 { + background: #bbf7d0; + color: #052e16; + border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.04); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.16); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { - background: rgba(134, 239, 172, 0.04); + .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 { + background: rgba(74, 222, 128, 0.04); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { - background: rgba(134, 239, 172, 0.16); + .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 { + background: rgba(74, 222, 128, 0.16); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { - color: #1c2127; - background: #FCD34D; - border: 1px solid #FCD34D; + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + color: #431407; + background: #fb923c; + border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #fbcb2d; - color: #1c2127; - border-color: #fbcb2d; + .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 { + background: #fdba74; + color: #431407; + border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fde082; + .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 { + box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #fbc30c; - color: #1c2127; - border-color: #fbc30c; + .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 { + background: #fed7aa; + color: #431407; + border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.04); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.16); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(252, 211, 77, 0.04); + .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 { + background: rgba(251, 146, 60, 0.04); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(252, 211, 77, 0.16); + .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 { + background: rgba(251, 146, 60, 0.16); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { - color: #1c2127; - background: #D8B4FE; - border: 1px solid #D8B4FE; + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + color: #3b0764; + background: #c084fc; + border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #c289fd; - color: #1c2127; - border-color: #c289fd; + .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 { + background: #d8b4fe; + color: #3b0764; + border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #e4cbfe; + .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 { + box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #ab5efd; - color: #1c2127; - border-color: #ab5efd; + .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 { + background: #e9d5ff; + color: #3b0764; + border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.04); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.16); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { - background: rgba(216, 180, 254, 0.04); + .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 { + background: rgba(192, 132, 252, 0.04); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { - background: rgba(216, 180, 254, 0.16); + .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 { + background: rgba(192, 132, 252, 0.16); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { - color: #1c2127; - background: #FCA5A5; - border: 1px solid #FCA5A5; + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + color: #450a0a; + background: #f87171; + border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #fb7d7d; - color: #1c2127; - border-color: #fb7d7d; + .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 { + background: #fca5a5; + color: #450a0a; + border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fdc0c0; + .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 { + box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #f95454; - color: #1c2127; - border-color: #f95454; + .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 { + background: #fecaca; + color: #450a0a; + border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.04); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.16); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { - background: rgba(252, 165, 165, 0.04); + .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 { + background: rgba(248, 113, 113, 0.04); border-color: transparent; - color: #FCA5A5; + color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { - background: rgba(252, 165, 165, 0.16); + .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 { + background: rgba(248, 113, 113, 0.16); border-color: transparent; - color: #FCA5A5; + 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 { @@ -2201,25 +3670,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #a78bfa; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #a78bfa; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(167, 139, 250, 0.04); - color: #a78bfa; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(167, 139, 250, 0.04); - color: #a78bfa; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #CBD5E1; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #CBD5E1; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - border-color: transparent; - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - border-color: transparent; - color: #CBD5E1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #93C5FD; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #93C5FD; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - border-color: transparent; - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - border-color: transparent; - color: #93C5FD; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #86EFAC; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #86EFAC; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - border-color: transparent; - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - border-color: transparent; - color: #86EFAC; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FCD34D; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #FCD34D; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - border-color: transparent; - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - border-color: transparent; - color: #FCD34D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #D8B4FE; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #D8B4FE; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - border-color: transparent; - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - border-color: transparent; - color: #D8B4FE; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #FCA5A5; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #FCA5A5; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - border-color: transparent; - color: #FCA5A5; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - border-color: transparent; - color: #FCA5A5; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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); } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #1c2532; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3072,6 +4777,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3193,31 +4992,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3248,6 +5098,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #a78bfa; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3657,6 +5908,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #424b57; + border-top: 1px solid #424b57; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #424b57; + border-left: 1px solid #424b57; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #424b57; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4001,12 +6984,12 @@ color: #030712; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -4017,6 +7000,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4075,6 +7271,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #ddd6fe; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,6 +7444,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4178,7 +7493,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4190,6 +7505,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4233,6 +7557,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4377,6 +7985,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4392,6 +8010,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4404,14 +8023,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4444,6 +8063,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4451,7 +8140,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4496,6 +8194,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4608,6 +8431,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4623,7 +8456,8 @@ 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; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #1f2937; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .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; + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4822,6 +8670,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #a78bfa; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #374151; @@ -4952,6 +8954,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4996,6 +9008,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #fca5a5; } + .p-inline-message.p-inline-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #fca5a5; } + .p-message.p-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #1f2937; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #a78bfa; color: #030712; @@ -5429,24 +10090,32 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #CBD5E1; - color: #1c2127; + background-color: #94a3b8; + color: #020617; } .p-badge.p-badge-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-badge.p-badge-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-badge.p-badge-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-badge.p-badge-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-badge.p-badge-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; } .p-badge.p-badge-lg { font-size: 1.125rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #a78bfa; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #a78bfa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #fde047; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #a78bfa; color: #030712; @@ -5610,30 +10676,63 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-tag.p-tag-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-tag.p-tag-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-tag.p-tag-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-tag.p-tag-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5664,6 +10763,10 @@ 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; } @@ -5676,22 +10779,22 @@ 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(203, 213, 225, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(134, 239, 172, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 211, 77, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(216, 180, 254, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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 { @@ -5725,4 +10828,18 @@ .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/theme.css b/public/themes/lara-dark-teal/theme.css index 54613f3..d6d141a 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -2,18 +2,18 @@ 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; + --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; @@ -35,18 +35,18 @@ --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,.1); - --surface-hover:rgba(255,255,255,.03); - --focus-ring: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + --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(52, 211, 153, 0.16); + --highlight-bg: rgba(45, 212, 191, 0.16); --highlight-text-color: rgba(255, 255, 255, 0.87); color-scheme: dark; } @@ -178,16 +178,16 @@ --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; + --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 { @@ -271,25 +271,145 @@ .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; + 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: #34d399; + 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: #34d399; + 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: #34d399; + color: #2dd4bf; } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -311,7 +431,7 @@ } .p-error { - color: #FCA5A5; + color: #fca5a5; } .p-text-secondary { @@ -332,11 +452,12 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-component-overlay-enter { @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -371,17 +588,18 @@ right: 3.75rem; } .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { - border-color: #34d399; + border-color: #2dd4bf; } .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - border-color: #34d399; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -408,7 +626,7 @@ color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-autocomplete-panel { @@ -430,18 +648,20 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); + background: rgba(45, 212, 191, 0.16); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + background: rgba(45, 212, 191, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: #424b57; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -453,14 +673,164 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + 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; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-datepicker { @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -508,7 +879,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; @@ -522,7 +893,7 @@ } .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; + color: #2dd4bf; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -547,24 +918,25 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-datepicker table td.p-datepicker-today > span { background: transparent; - color: #34d399; + color: #2dd4bf; 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); + background: rgba(45, 212, 191, 0.16); } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -594,7 +967,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-datepicker .p-timepicker button:last-child { margin-top: 0.2em; @@ -618,7 +991,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -630,7 +1003,7 @@ } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid #424b57; @@ -646,13 +1019,23 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .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); + 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) { + outline-color: transparent; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); @@ -660,7 +1043,10 @@ .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); + 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) { + outline-color: transparent; } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); @@ -668,28 +1054,123 @@ .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); + 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; + border-color: #2dd4bf; } .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; + 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; @@ -711,7 +1192,7 @@ border-bottom-right-radius: 6px; } .p-cascadeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-cascadeselect-panel { @@ -732,18 +1213,20 @@ 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); + background: rgba(45, 212, 191, 0.16); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + 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: #424b57; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #424b57; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -776,6 +1281,7 @@ 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; @@ -786,52 +1292,111 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { - border-color: #34d399; - background: #34d399; + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #2dd4bf; + background: #2dd4bf; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #34d399; + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #2dd4bf; } - .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(52, 211, 153, 0.2); - border-color: #34d399; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a7f3d0; - background: #a7f3d0; + .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; + 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-checkbox-box.p-highlight { - background: #34d399; + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #2dd4bf; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - background: #a7f3d0; + .p-input-filled .p-checkbox: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: #34d399; + 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(52, 211, 153, 0.2); - border-color: #34d399; + 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; @@ -859,7 +1424,15 @@ margin: 0; } .p-chips.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); } .p-colorpicker-preview { @@ -880,20 +1453,128 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; + border-color: #2dd4bf; } .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; + 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; @@ -921,7 +1602,7 @@ right: 3rem; } .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-dropdown-panel { @@ -960,21 +1641,28 @@ 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); + background: rgba(45, 212, 191, 0.16); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + 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: #424b57; - } - .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.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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1093,28 +2025,30 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #424b57; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #34d399; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + background: #5eead4; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #030712; + .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-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #6ee7b7; + .p-inputswitch.p-invalid > .p-inputswitch-slider { + border-color: #fca5a5; } - .p-inputswitch.p-invalid .p-inputswitch-slider { - border-color: #FCA5A5; + + .p-fluid .p-inputtext { + width: 100%; } .p-inputtext { @@ -1128,18 +2062,28 @@ 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; + border-color: #2dd4bf; } .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; + 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; + 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; @@ -1157,30 +2101,18 @@ } .p-float-label > .p-invalid + label { - color: #FCA5A5; + color: #fca5a5; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,9 +2243,15 @@ 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); + background: rgba(45, 212, 191, 0.16); } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1272,24 +2266,134 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + 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: #424b57; + 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; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-listbox.p-invalid { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .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 { @@ -1297,15 +2401,25 @@ 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; + border-color: #2dd4bf; } .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; + 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; @@ -1332,7 +2446,7 @@ border-bottom-right-radius: 6px; } .p-multiselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1383,7 +2498,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-multiselect-panel .p-multiselect-items { padding: 0.75rem 0; @@ -1397,18 +2512,20 @@ 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); + background: rgba(45, 212, 191, 0.16); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + 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: #424b57; - } - .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.03); } @@ -1428,18 +2545,35 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; + + .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-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-password-panel { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #34d399; - } - .p-radiobutton .p-radiobutton-box: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; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { - border-color: #34d399; - background: #34d399; + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #2dd4bf; + background: #2dd4bf; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - border-color: #a7f3d0; - background: #a7f3d0; - color: #030712; + .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; + border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { + .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 .p-radiobutton-box.p-highlight { - background: #34d399; + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #99f6e4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - 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; @@ -1534,22 +2745,21 @@ height: 1.143rem; } .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { - color: #F48FB1; + 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); - border-color: #34d399; + 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: #34d399; + color: #2dd4bf; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #34d399; + color: #2dd4bf; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { - color: #F48FB1; + color: #f48fb1; } .p-selectbutton .p-button { @@ -1572,8 +2782,8 @@ color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { - background: #34d399; - border-color: #34d399; + background: #2dd4bf; + border-color: #2dd4bf; color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, @@ -1581,8 +2791,8 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover { - background: #6ee7b7; - border-color: #6ee7b7; + background: #5eead4; + border-color: #5eead4; color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, @@ -1590,7 +2800,45 @@ color: #030712; } .p-selectbutton.p-invalid > .p-button { - border-color: #FCA5A5; + border-color: #fca5a5; + } + + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; } .p-slider { @@ -1616,21 +2864,83 @@ height: 1.143rem; width: 1.143rem; background: #424b57; - border: 2px solid #34d399; + border: 2px solid #2dd4bf; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-slider .p-slider-range { - background: #34d399; + background: #2dd4bf; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #34d399; - border-color: #34d399; + background: #2dd4bf; + border-color: #2dd4bf; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; } .p-treeselect { @@ -1638,15 +2948,25 @@ 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-treeselect:not(.p-disabled):hover { - border-color: #34d399; + border-color: #2dd4bf; } .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; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } + .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; @@ -1670,7 +2990,7 @@ border-bottom-right-radius: 6px; } .p-treeselect.p-invalid.p-component { - border-color: #FCA5A5; + border-color: #fca5a5; } .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { @@ -1703,129 +3023,229 @@ background-color: #424b57; } - .p-togglebutton.p-button { + .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 { + .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-button: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-togglebutton.p-highlight .p-button { + background: #2dd4bf; + border-color: #2dd4bf; + color: #030712; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + .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.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .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.p-button.p-highlight { - background: #34d399; - border-color: #34d399; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #5eead4; + border-color: #5eead4; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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.p-button.p-highlight:hover { - background: #6ee7b7; - border-color: #6ee7b7; - 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-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #030712; + .p-togglebutton.p-invalid > .p-button { + border-color: #fca5a5; } - .p-togglebutton.p-button.p-invalid > .p-button { - border-color: #FCA5A5; + + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #030712; - background: #34d399; - border: 1px solid #34d399; + 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; + outline-color: transparent; } - .p-button:enabled:hover { - background: #6ee7b7; + .p-button:not(:disabled):hover { + background: #5eead4; color: #030712; - border-color: #6ee7b7; + border-color: #5eead4; } - .p-button:enabled:active { - background: #a7f3d0; + .p-button:not(:disabled):active { + background: #99f6e4; color: #030712; - border-color: #a7f3d0; + border-color: #99f6e4; } .p-button.p-button-outlined { background-color: transparent; - color: #34d399; + color: #2dd4bf; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; + .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:enabled:active { - background: rgba(52, 211, 153, 0.16); - color: #34d399; + .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:enabled:hover { + .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:enabled:active { + .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; + color: #2dd4bf; border-color: transparent; } - .p-button.p-button-text:enabled:hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; + .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:enabled:active { - background: rgba(52, 211, 153, 0.16); - color: #34d399; + .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:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-button .p-button-label { transition-duration: 0.2s; @@ -1847,7 +3267,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #34d399; + color: #2dd4bf; background-color: #030712; } .p-button.p-button-raised { @@ -1895,331 +3315,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { - color: #1c2127; - background: #CBD5E1; - border: 1px solid #CBD5E1; + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + color: #020617; + background: #94a3b8; + border: 1px solid #94a3b8; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { - background: #b0bfd1; - color: #1c2127; - border-color: #b0bfd1; + .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 { + background: #cbd5e1; + color: #020617; + border-color: #cbd5e1; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #dbe2ea; + .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 { + box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { - background: #95a9c2; - color: #1c2127; - border-color: #95a9c2; + .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 { + background: #e2e8f0; + color: #020617; + border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.04); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; + .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 { + background: rgba(148, 163, 184, 0.16); + color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { - background: rgba(203, 213, 225, 0.04); + .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 { + background: rgba(148, 163, 184, 0.04); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { - background: rgba(203, 213, 225, 0.16); + .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 { + background: rgba(148, 163, 184, 0.16); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + color: #082f49; + background: #38bdf8; + border: 1px solid #38bdf8; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; + .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 { + background: #7dd3fc; + color: #082f49; + border-color: #7dd3fc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #b3d6fe; + .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 { + box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #449bfc; - color: #1c2127; - border-color: #449bfc; + .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 { + background: #bae6fd; + color: #082f49; + border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.04); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; + .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 { + background: rgba(56, 189, 248, 0.16); + color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(147, 197, 253, 0.04); + .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 { + background: rgba(56, 189, 248, 0.04); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(147, 197, 253, 0.16); + .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 { + background: rgba(56, 189, 248, 0.16); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { - color: #1c2127; - background: #86EFAC; - border: 1px solid #86EFAC; + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + color: #052e16; + background: #4ade80; + border: 1px solid #4ade80; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { - background: #65eb95; - color: #1c2127; - border-color: #65eb95; + .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 { + background: #86efac; + color: #052e16; + border-color: #86efac; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #aaf4c5; + .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 { + box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { - background: #44e67f; - color: #1c2127; - border-color: #44e67f; + .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 { + background: #bbf7d0; + color: #052e16; + border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.04); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; + .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 { + background: rgba(74, 222, 128, 0.16); + color: #4ade80; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #86EFAC; + color: #4ade80; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { - background: rgba(134, 239, 172, 0.04); + .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 { + background: rgba(74, 222, 128, 0.04); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { - background: rgba(134, 239, 172, 0.16); + .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 { + background: rgba(74, 222, 128, 0.16); border-color: transparent; - color: #86EFAC; + color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { - color: #1c2127; - background: #FCD34D; - border: 1px solid #FCD34D; + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + color: #431407; + background: #fb923c; + border: 1px solid #fb923c; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #fbcb2d; - color: #1c2127; - border-color: #fbcb2d; + .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 { + background: #fdba74; + color: #431407; + border-color: #fdba74; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fde082; + .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 { + box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #fbc30c; - color: #1c2127; - border-color: #fbc30c; + .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 { + background: #fed7aa; + color: #431407; + border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.04); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; + .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 { + background: rgba(251, 146, 60, 0.16); + color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCD34D; + color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(252, 211, 77, 0.04); + .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 { + background: rgba(251, 146, 60, 0.04); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(252, 211, 77, 0.16); + .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 { + background: rgba(251, 146, 60, 0.16); border-color: transparent; - color: #FCD34D; + color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { - color: #1c2127; - background: #D8B4FE; - border: 1px solid #D8B4FE; + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + color: #3b0764; + background: #c084fc; + border: 1px solid #c084fc; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { - background: #c289fd; - color: #1c2127; - border-color: #c289fd; + .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 { + background: #d8b4fe; + color: #3b0764; + border-color: #d8b4fe; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #e4cbfe; + .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 { + box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { - background: #ab5efd; - color: #1c2127; - border-color: #ab5efd; + .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 { + background: #e9d5ff; + color: #3b0764; + border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.04); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; + .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 { + background: rgba(192, 132, 252, 0.16); + color: #c084fc; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { - background: rgba(216, 180, 254, 0.04); + .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 { + background: rgba(192, 132, 252, 0.04); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { - background: rgba(216, 180, 254, 0.16); + .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 { + background: rgba(192, 132, 252, 0.16); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { - color: #1c2127; - background: #FCA5A5; - border: 1px solid #FCA5A5; + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + color: #450a0a; + background: #f87171; + border: 1px solid #f87171; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { - background: #fb7d7d; - color: #1c2127; - border-color: #fb7d7d; + .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 { + background: #fca5a5; + color: #450a0a; + border-color: #fca5a5; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { - box-shadow: 0 0 0 1px #fdc0c0; + .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 { + box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { - background: #f95454; - color: #1c2127; - border-color: #f95454; + .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 { + background: #fecaca; + color: #450a0a; + border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.04); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + .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 { + background: rgba(248, 113, 113, 0.16); + color: #f87171; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FCA5A5; + color: #f87171; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { - background: rgba(252, 165, 165, 0.04); + .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 { + background: rgba(248, 113, 113, 0.04); border-color: transparent; - color: #FCA5A5; + color: #f87171; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { - background: rgba(252, 165, 165, 0.16); + .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 { + background: rgba(248, 113, 113, 0.16); border-color: transparent; - color: #FCA5A5; + 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; + color: #2dd4bf; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #34d399; + color: #2dd4bf; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; - box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2); border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #34d399; + color: #2dd4bf; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2239,7 +3785,7 @@ .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-speeddial-action { @@ -2247,6 +3793,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #111827; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 211, 153, 0.04); - color: #34d399; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #CBD5E1; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button { - background-color: transparent; - color: #CBD5E1; - border-color: transparent; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - border-color: transparent; - color: #CBD5E1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - border-color: transparent; - color: #CBD5E1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #93C5FD; - border: 1px solid; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button { - background-color: transparent; - color: #93C5FD; - border-color: transparent; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - border-color: transparent; - color: #93C5FD; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - border-color: transparent; - color: #93C5FD; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #86EFAC; - border: 1px solid; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button { - background-color: transparent; - color: #86EFAC; - border-color: transparent; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - border-color: transparent; - color: #86EFAC; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - border-color: transparent; - color: #86EFAC; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FCD34D; - border: 1px solid; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button { - background-color: transparent; - color: #FCD34D; - border-color: transparent; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - border-color: transparent; - color: #FCD34D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - border-color: transparent; - color: #FCD34D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #D8B4FE; - border: 1px solid; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button { - background-color: transparent; - color: #D8B4FE; - border-color: transparent; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - border-color: transparent; - color: #D8B4FE; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - border-color: transparent; - color: #D8B4FE; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #FCA5A5; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #FCA5A5; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - border-color: transparent; - color: #FCA5A5; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - border-color: transparent; - color: #FCA5A5; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2579,7 +3985,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -2599,10 +4005,245 @@ 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); + background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2656,7 +4297,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):hover { @@ -2667,21 +4308,21 @@ color: rgba(255, 255, 255, 0.87); } .p-datatable .p-sortable-column.p-highlight { - background: rgba(52, 211, 153, 0.16); + 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:hover { - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } .p-datatable .p-sortable-column.p-highlight: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); + box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); outline: 0 none; } .p-datatable .p-datatable-tbody > tr { @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2721,7 +4363,7 @@ .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); + 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; @@ -2730,25 +4372,29 @@ font-weight: 700; } .p-datatable .p-datatable-tbody > tr:focus-visible { - outline: 0.15rem solid rgba(52, 211, 153, 0.2); + outline: 0.15rem solid rgba(45, 212, 191, 0.2); outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(52, 211, 153, 0.16); + 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(52, 211, 153, 0.16); + 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(52, 211, 153, 0.16); + box-shadow: inset 0 -2px 0 0 rgba(45, 212, 191, 0.16); } .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } .p-datatable .p-column-resizer-helper { - background: #34d399; + background: #2dd4bf; } .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, @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #1c2532; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { - background: rgba(52, 211, 153, 0.16); + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2921,13 +4564,13 @@ 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); + 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(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-column-filter-clear-button { @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2947,7 +4591,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-column-filter-overlay { @@ -2970,9 +4614,15 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); + 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); @@ -2981,7 +4631,7 @@ .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); + 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; @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.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-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,20 +4745,30 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + background: rgba(45, 212, 191, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #1c2532; @@ -3072,16 +4777,69 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); + 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(24, 111, 80, 0.16); + color: rgba(22, 107, 97, 0.16); } .p-organizationchart .p-organizationchart-line-down { background: #424b57; @@ -3104,11 +4862,52 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + + .p-paginator-default { + display: flex; + } + + .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; } .p-paginator { @@ -3183,8 +4982,8 @@ 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); + 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 { @@ -3193,31 +4992,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.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-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #424b57; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,20 +5066,30 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: #424b57; + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(52, 211, 153, 0.24); + background: rgba(45, 212, 191, 0.24); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #1c2532; @@ -3248,8 +5098,119 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { - border: 2px solid #34d399; + border: 2px solid #2dd4bf; border-radius: 50%; width: 1rem; height: 1rem; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3287,7 +5330,7 @@ .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); + 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; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3312,7 +5356,7 @@ .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); + 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; @@ -3321,11 +5365,11 @@ .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 { + .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); + 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, @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3406,7 +5619,7 @@ background: #1f2937; } .p-treetable .p-sortable-column { - outline-color: rgba(52, 211, 153, 0.2); + outline-color: rgba(45, 212, 191, 0.2); } .p-treetable .p-sortable-column .p-sortable-column-icon { color: rgba(255, 255, 255, 0.6); @@ -3418,7 +5631,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -3429,7 +5642,7 @@ color: rgba(255, 255, 255, 0.87); } .p-treetable .p-sortable-column.p-highlight { - background: rgba(52, 211, 153, 0.16); + 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 { @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3464,20 +5678,20 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .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 { + .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: 0.15rem solid rgba(45, 212, 191, 0.2); outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: rgba(52, 211, 153, 0.16); + 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 { @@ -3494,7 +5708,7 @@ color: rgba(255, 255, 255, 0.87); } .p-treetable .p-column-resizer-helper { - background: #34d399; + background: #2dd4bf; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3574,7 +5806,7 @@ .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 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: inset 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); @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -3657,6 +5908,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3664,7 +5916,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { color: rgba(255, 255, 255, 0.87); @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #424b57; + border-top: 1px solid #424b57; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #424b57; + border-left: 1px solid #424b57; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3730,7 +6059,7 @@ .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); + 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; @@ -3756,15 +6085,132 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; } .p-splitter { @@ -3780,16 +6226,255 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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); + 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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action: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-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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,33 +6495,35 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .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); + 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: #34d399; + 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: #34d399; - color: #34d399; + border-color: #2dd4bf; + color: #2dd4bf; } .p-tabview .p-tabview-nav-btn.p-link { background: #1f2937; - color: #34d399; + 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; + outline-color: transparent; } .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); + box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-tabview .p-tabview-panels { background: #1f2937; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3941,7 +6856,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -3960,14 +6875,12 @@ background: #1f2937; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3986,7 +6969,7 @@ padding: 1.25rem; } .p-overlaypanel .p-overlaypanel-close { - background: #34d399; + background: #2dd4bf; color: #030712; width: 2rem; height: 2rem; @@ -3997,16 +6980,16 @@ right: -1rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: #6ee7b7; + background: #5eead4; color: #030712; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 41, 55, 0); border-bottom-color: #1f2937; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(66, 75, 87, 0); border-bottom-color: #3f4753; } @@ -4017,6 +7000,159 @@ border-top-color: #424b57; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4046,7 +7187,7 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-sidebar .p-sidebar-header + .p-sidebar-content { padding-top: 0; @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4075,6 +7271,50 @@ border-bottom-color: #424b57; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4088,7 +7328,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-fileupload .p-fileupload-content { background: #1f2937; @@ -4099,8 +7339,8 @@ border-bottom-left-radius: 6px; } .p-fileupload .p-fileupload-content.p-fileupload-highlight { - border: 1px dashed #34d399; - background-color: rgba(52, 211, 153, 0.16); + border: 1px dashed #2dd4bf; + background-color: rgba(45, 212, 191, 0.16); } .p-fileupload .p-fileupload-file { padding: 1rem; @@ -4129,14 +7369,46 @@ } .p-fileupload-choose:not(.p-disabled):hover { - background: #6ee7b7; + background: #5eead4; color: #030712; - border-color: #6ee7b7; + border-color: #5eead4; } .p-fileupload-choose:not(.p-disabled):active { - background: #a7f3d0; + background: #99f6e4; color: #030712; - border-color: #a7f3d0; + border-color: #99f6e4; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; } .p-breadcrumb { @@ -4148,11 +7420,12 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .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); + 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); @@ -4171,6 +7444,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4178,7 +7493,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4190,6 +7505,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4212,7 +7536,7 @@ } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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); @@ -4221,11 +7545,11 @@ 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); + 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; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4233,6 +7557,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4271,7 +7711,7 @@ .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); + box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); } .p-dock .p-dock-link { width: 4rem; @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #374151; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4356,7 +7964,7 @@ } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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); @@ -4365,11 +7973,11 @@ 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); + 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; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4377,6 +7985,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4392,6 +8010,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4404,14 +8023,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4444,6 +8063,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .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-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #424b57; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4451,7 +8140,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4475,7 +8173,7 @@ } .p-menu .p-menuitem.p-highlight > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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); @@ -4484,11 +8182,11 @@ 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); + 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; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4496,6 +8194,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4587,7 +8410,7 @@ } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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); @@ -4596,11 +8419,11 @@ 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); + 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; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4608,6 +8431,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4623,7 +8456,8 @@ 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; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #424b57; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #1f2937; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4745,7 +8584,7 @@ .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); + 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); @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4801,7 +8649,7 @@ } .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); + 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); @@ -4810,11 +8658,11 @@ 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); + 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; + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4822,6 +8670,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4870,10 +8782,10 @@ .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); + 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(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4918,17 +8871,66 @@ .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); + 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: #34d399; + 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: #34d399; - color: #34d399; + border-color: #2dd4bf; + color: #2dd4bf; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; } .p-tieredmenu { @@ -4937,7 +8939,7 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #374151; @@ -4952,6 +8954,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4975,7 +8987,7 @@ } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: rgba(52, 211, 153, 0.16); + 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); @@ -4984,11 +8996,11 @@ 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); + 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; + background: rgba(255, 255, 255, 0.03); } .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); @@ -4996,6 +9008,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #fca5a5; } + .p-inline-message.p-inline-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 1px; + color: #020617; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #020617; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 1px; + color: #111827; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #111827; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5090,7 +9200,7 @@ .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); + 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); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #fca5a5; } + .p-message.p-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-message.p-message-secondary .p-message-icon { + color: #020617; + } + .p-message.p-message-secondary .p-message-close { + color: #020617; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-message.p-message-contrast .p-message-icon { + color: #111827; + } + .p-message.p-message-contrast .p-message-close { + color: #111827; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,7 +9402,7 @@ .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); + 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); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #94a3b8; + border: solid #94a3b8; + border-width: 0 0 0 6px; + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #020617; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid #ffffff; + border-width: 0 0 0 6px; + color: #111827; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #111827; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5297,7 +9809,7 @@ 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); + 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 { @@ -5316,7 +9828,7 @@ 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); + background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } .p-galleria .p-galleria-thumbnail-container { @@ -5338,16 +9850,93 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .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); + 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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5420,7 +10048,40 @@ } .p-badge { - background: #34d399; + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #2dd4bf; color: #030712; font-size: 0.75rem; font-weight: 700; @@ -5429,24 +10090,32 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #CBD5E1; - color: #1c2127; + background-color: #94a3b8; + color: #020617; } .p-badge.p-badge-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-badge.p-badge-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-badge.p-badge-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-badge.p-badge-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-badge.p-badge-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #111827; } .p-badge.p-badge-lg { font-size: 1.125rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5485,20 +10192,40 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } .p-chip .p-chip-remove-icon:focus { outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5507,9 +10234,213 @@ .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); + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2dd4bf; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #2dd4bf; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5519,13 +10450,39 @@ .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #34d399; + background: #2dd4bf; } .p-progressbar .p-progressbar-label { color: #030712; line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #fde047; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5579,10 +10597,10 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-scrolltop.p-link { - background: rgba(52, 211, 153, 0.16); + background: rgba(45, 212, 191, 0.16); } .p-scrolltop.p-link:hover { - background: rgba(52, 211, 153, 0.3616); + background: rgba(45, 212, 191, 0.3616); } .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -5602,7 +10652,23 @@ } .p-tag { - background: #34d399; + 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; + } + + .p-tag { + background: #2dd4bf; color: #030712; font-size: 0.75rem; font-weight: 700; @@ -5610,30 +10676,63 @@ border-radius: 6px; } .p-tag.p-tag-success { - background-color: #86EFAC; - color: #1c2127; + background-color: #4ade80; + color: #052e16; } .p-tag.p-tag-info { - background-color: #93C5FD; - color: #1c2127; + background-color: #38bdf8; + color: #082f49; } .p-tag.p-tag-warning { - background-color: #FCD34D; - color: #1c2127; + background-color: #fb923c; + color: #431407; } .p-tag.p-tag-danger { - background-color: #FCA5A5; - color: #1c2127; + background-color: #f87171; + color: #450a0a; + } + .p-tag.p-tag-secondary { + background-color: #94a3b8; + color: #020617; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #111827; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5664,45 +10763,49 @@ 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; + background-color: #2dd4bf; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: #34d399; + background-color: #2dd4bf; } .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); + 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(203, 213, 225, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(134, 239, 172, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 211, 77, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(216, 180, 254, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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; + 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 #34d399; + 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(52, 211, 153, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); + 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 { @@ -5725,4 +10828,18 @@ .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/Inter-italic.var.woff2 b/public/themes/lara-light-amber/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-light-amber/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-light-amber/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-amber/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-light-amber/fonts/Inter-roman.var.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 0000000..1fea103 --- /dev/null +++ b/public/themes/lara-light-amber/theme.css @@ -0,0 +1,10833 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #f59e0b; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #e5e7eb; + color: #4b5563; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #b45309; + background: #fffbeb; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #e24c4c; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-slider .p-slider-range { + background: #f59e0b; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #f59e0b; + border-color: #f59e0b; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: #4b5563; + color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: #022354; + color: #fff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: #f3f4f6; + color: #374151; + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: #fffbeb; + color: #b45309; + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid #fef08a; + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-datatable .p-column-resizer-helper { + background: #f59e0b; + } + .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } + .p-orderlist .p-orderlist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } + .p-picklist .p-picklist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8f8fa; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f3f4f6; + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: #374151; + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #e5e7eb; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #e5e7eb; + background: #ffffff; + color: #4b5563; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f9fafb; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #f59e0b; + background-color: #fffbeb; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #d97706; + color: #ffffff; + border-color: #d97706; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #b45309; + color: #ffffff; + border-color: #b45309; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.5rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6b7280; + padding: 1.25rem; + font-weight: 700; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f59e0b; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #f59e0b; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + 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: #ff5757; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .p-button-label { + font-weight: 600; + } + + .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 black; + } + .p-button.p-button-secondary:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + } + .p-button.p-button-success:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + } + .p-button.p-button-info:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; + } + .p-button.p-button-warning:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; + } + .p-button.p-button-help:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + } + .p-button.p-button-danger:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + } + + .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 black; + } + + .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/theme.css b/public/themes/lara-light-blue/theme.css index f52b346..c4fe2fb 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -404,7 +622,7 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-autocomplete.p-invalid.p-component > .p-inputtext { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #1D4ED8; background: #EFF6FF; @@ -438,10 +662,6 @@ background: rgba(59, 130, 246, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -453,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #1D4ED8; @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #374151; @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; } @@ -654,6 +1034,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -662,6 +1045,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -732,6 +1213,12 @@ 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; @@ -740,10 +1227,6 @@ 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: #e5e7eb; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f3f4f6; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3B82F6; background: #3B82F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #3B82F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1D4ED8; - background: #1D4ED8; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3B82F6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -841,7 +1406,7 @@ border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -862,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -880,11 +1453,107 @@ 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; @@ -895,6 +1564,18 @@ 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; } @@ -960,6 +1641,12 @@ 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; @@ -968,13 +1655,14 @@ 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: #e5e7eb; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1093,30 +2025,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #3B82F6; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #2563eb; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1128,6 +2062,7 @@ 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; @@ -1141,6 +2076,15 @@ .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; @@ -1160,27 +2104,15 @@ color: #e24c4c; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #6b7280; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #6b7280; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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; @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + 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; @@ -1292,11 +2290,118 @@ border-color: #e24c4c; } + .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; @@ -1307,6 +2412,15 @@ 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; @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #374151; @@ -1397,6 +2512,12 @@ 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; @@ -1405,10 +2526,6 @@ 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: #e5e7eb; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -1428,14 +2545,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3B82F6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - border-color: #3B82F6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3B82F6; background: #3B82F6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #3B82F6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1540,7 +2751,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; - border-color: #3B82F6; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #3B82F6; @@ -1593,6 +2803,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1619,25 +2867,88 @@ border: 2px solid #3B82F6; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } .p-slider .p-slider-range { background: #3B82F6; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #3B82F6; border-color: #3B82F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #3B82F6; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } + .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; @@ -1703,53 +3023,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { - background: #3B82F6; - border-color: #3B82F6; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #2563eb; - border-color: #2563eb; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #3B82F6; @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #1D4ED8; color: #ffffff; border-color: #1D4ED8; @@ -1774,12 +3194,12 @@ color: #3B82F6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(59, 130, 246, 0.16); color: #3B82F6; border: 1px solid; @@ -1788,11 +3208,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1801,12 +3221,12 @@ color: #3B82F6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(59, 130, 246, 0.16); color: #3B82F6; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -1895,331 +3315,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E2E8F0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #64748B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; + background: #0ea5e9; + border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #2563EB; + .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 { + background: #0284c7; color: #ffffff; - border-color: #2563EB; + border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BFDBFE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #1D4ED8; + .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 { + background: #0369a1; color: #ffffff; - border-color: #1D4ED8; + border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.04); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(59, 130, 246, 0.16); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.16); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(59, 130, 246, 0.04); + .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 { + background: rgba(14, 165, 233, 0.04); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(59, 130, 246, 0.16); + .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 { + background: rgba(14, 165, 233, 0.16); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BBF7D0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #15803D; color: #ffffff; border-color: #15803D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #22C55E; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; - background: #F59E0B; - border: 1px solid #F59E0B; + background: #f97316; + border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #D97706; + .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 { + background: #ea580c; color: #ffffff; - border-color: #D97706; + border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FDE68A; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #B45309; + .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 { + background: #c2410c; color: #ffffff; - border-color: #B45309; + border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.04); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(245, 158, 11, 0.16); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.16); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(245, 158, 11, 0.04); + .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 { + background: rgba(249, 115, 22, 0.04); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(245, 158, 11, 0.16); + .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 { + background: rgba(249, 115, 22, 0.16); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E9D5FF; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7E22CE; color: #ffffff; border-color: #7E22CE; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #A855F7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FECACA; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #B91C1C; color: #ffffff; border-color: #B91C1C; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #EF4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #1D4ED8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #1D4ED8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: #4b5563; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #022354; @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - border-color: transparent; - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - border-color: transparent; - color: #3B82F6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - border-color: transparent; - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - border-color: transparent; - color: #F59E0B; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: #1D4ED8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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; } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8f8fa; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #1D4ED8; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #374151; @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #374151; @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #1D4ED8; background: #EFF6FF; @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f9fafb; - color: #374151; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + border-color: #3B82F6; + } + .p-orderlist .p-orderlist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #1D4ED8; @@ -3072,6 +4777,59 @@ background: #f3f4f6; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3193,31 +4992,72 @@ color: #374151; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + border-color: #3B82F6; + } + .p-picklist .p-picklist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #1D4ED8; @@ -3248,6 +5098,117 @@ background: #f3f4f6; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #3B82F6; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #374151; @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3657,6 +5908,7 @@ color: #374151; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #e5e7eb; + border-top: 1px solid #e5e7eb; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #e5e7eb; + border-left: 1px solid #e5e7eb; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #374151; @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #e5e7eb; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #ffffff; color: #4b5563; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4001,12 +6984,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4017,6 +7000,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4075,6 +7271,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #1D4ED8; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,25 +7444,76 @@ color: #6b7280; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { - padding: 0.25rem 0; + 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; } .p-contextmenu .p-submenu-list { - padding: 0.25rem 0; + 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4233,6 +7557,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4377,6 +7985,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4392,6 +8010,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4403,16 +8022,16 @@ border-top-left-radius: 6px; } .p-megamenu .p-submenu-list { - padding: 0.25rem 0; - width: 12.5rem; + padding: 0.5rem 0; + min-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.25rem 0; + min-width: 12.5rem; + padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4444,14 +8063,93 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4496,6 +8194,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4608,6 +8431,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4619,11 +8452,12 @@ color: #6b7280; } .p-menubar .p-submenu-list { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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.25rem 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #f9fafb; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #6b7280; @@ -4766,7 +8605,7 @@ color: #374151; } .p-panelmenu .p-panelmenu-content { - padding: 0.25rem 0; + padding: 0.5rem 0; border: 1px solid #e5e7eb; background: #ffffff; color: #4b5563; @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .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; @@ -4822,6 +8670,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #4b5563; @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #3B82F6; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4948,10 +8950,20 @@ outline: 0 none; } .p-tieredmenu .p-submenu-list { - padding: 0.25rem 0; + 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4996,6 +9008,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #ff5757; } + .p-inline-message.p-inline-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #ff5757; } + .p-message.p-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f9fafb; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3B82F6; color: #ffffff; @@ -5437,17 +10098,25 @@ color: #ffffff; } .p-badge.p-badge-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-badge.p-badge-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-badge.p-badge-danger { background-color: #EF4444; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f3f4f6; @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3B82F6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #3B82F6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #cc8925; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #3B82F6; color: #ffffff; @@ -5614,26 +10680,59 @@ color: #ffffff; } .p-tag.p-tag-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-tag.p-tag-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-tag.p-tag-danger { background-color: #EF4444; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #4b5563; @@ -5648,7 +10747,7 @@ } @layer primevue { .p-button-label { - font-weight: 700; + font-weight: 600; } .p-selectbutton > .p-button, @@ -5664,6 +10763,10 @@ 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; } @@ -5682,10 +10785,10 @@ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; @@ -5717,4 +10820,14 @@ .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/Inter-italic.var.woff2 b/public/themes/lara-light-cyan/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-light-cyan/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-light-cyan/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-cyan/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-light-cyan/fonts/Inter-roman.var.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 0000000..8521f8e --- /dev/null +++ b/public/themes/lara-light-cyan/theme.css @@ -0,0 +1,10833 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #06b6d4; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #e5e7eb; + color: #4b5563; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #0e7490; + background: #ecfeff; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #e24c4c; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-slider .p-slider-range { + background: #06b6d4; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #06b6d4; + border-color: #06b6d4; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: #4b5563; + color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: #022354; + color: #fff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: #f3f4f6; + color: #374151; + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: #ecfeff; + color: #0e7490; + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid #a5f3fc; + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-datatable .p-column-resizer-helper { + background: #06b6d4; + } + .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } + .p-orderlist .p-orderlist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } + .p-picklist .p-picklist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8f8fa; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f3f4f6; + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: #374151; + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #e5e7eb; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #e5e7eb; + background: #ffffff; + color: #4b5563; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f9fafb; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #06b6d4; + background-color: #ecfeff; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #0891b2; + color: #ffffff; + border-color: #0891b2; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #0e7490; + color: #ffffff; + border-color: #0e7490; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.5rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6b7280; + padding: 1.25rem; + font-weight: 700; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #06b6d4; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #06b6d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + 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: #ff5757; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .p-button-label { + font-weight: 600; + } + + .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 black; + } + .p-button.p-button-secondary:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + } + .p-button.p-button-success:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + } + .p-button.p-button-info:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; + } + .p-button.p-button-warning:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; + } + .p-button.p-button-help:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + } + .p-button.p-button-danger:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + } + + .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 black; + } + + .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/Inter-italic.var.woff2 b/public/themes/lara-light-green/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-light-green/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-light-green/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-green/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-light-green/fonts/Inter-roman.var.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 0000000..e0672e7 --- /dev/null +++ b/public/themes/lara-light-green/theme.css @@ -0,0 +1,10833 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #10b981; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #e5e7eb; + color: #4b5563; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #047857; + background: #F0FDFA; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(16, 185, 129, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #e24c4c; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-slider .p-slider-range { + background: #10b981; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #10b981; + border-color: #10b981; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: #4b5563; + color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: #022354; + color: #fff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: #f3f4f6; + color: #374151; + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: #F0FDFA; + color: #047857; + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid #a7f3d0; + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-datatable .p-column-resizer-helper { + background: #10b981; + } + .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } + .p-orderlist .p-orderlist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } + .p-picklist .p-picklist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8f8fa; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f3f4f6; + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: #374151; + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #e5e7eb; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #e5e7eb; + background: #ffffff; + color: #4b5563; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f9fafb; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #10b981; + background-color: #F0FDFA; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #059669; + color: #ffffff; + border-color: #059669; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #047857; + color: #ffffff; + border-color: #047857; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.5rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6b7280; + padding: 1.25rem; + font-weight: 700; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #10b981; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #10b981; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + 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: #ff5757; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .p-button-label { + font-weight: 600; + } + + .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 black; + } + .p-button.p-button-secondary:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + } + .p-button.p-button-success:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + } + .p-button.p-button-info:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; + } + .p-button.p-button-warning:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; + } + .p-button.p-button-help:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + } + .p-button.p-button-danger:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + } + + .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 black; + } + + .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/theme.css b/public/themes/lara-light-indigo/theme.css index 5a134db..905b6b7 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -404,7 +622,7 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-autocomplete.p-invalid.p-component > .p-inputtext { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #4338CA; background: #EEF2FF; @@ -438,10 +662,6 @@ background: #E0E7FF; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -453,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #4338CA; @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #374151; @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; } @@ -654,6 +1034,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -662,6 +1045,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -732,6 +1213,12 @@ 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; @@ -740,10 +1227,6 @@ background: #E0E7FF; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f3f4f6; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #6366F1; background: #6366F1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #6366F1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4338CA; - background: #4338CA; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #6366F1; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -841,7 +1406,7 @@ border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -862,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -880,11 +1453,107 @@ 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; @@ -895,6 +1564,18 @@ 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; } @@ -960,6 +1641,12 @@ 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; @@ -968,13 +1655,14 @@ background: #E0E7FF; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1093,30 +2025,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #6366F1; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #4F46E5; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1128,6 +2062,7 @@ 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; @@ -1141,6 +2076,15 @@ .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; @@ -1160,27 +2104,15 @@ color: #e24c4c; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #6b7280; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #6b7280; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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; @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + 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; @@ -1292,11 +2290,118 @@ border-color: #e24c4c; } + .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; @@ -1307,6 +2412,15 @@ 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; @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #374151; @@ -1397,6 +2512,12 @@ 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; @@ -1405,10 +2526,6 @@ background: #E0E7FF; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -1428,14 +2545,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #6366F1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #C7D2FE; - border-color: #6366F1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #6366F1; background: #6366F1; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #6366F1; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1540,7 +2751,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; - border-color: #6366F1; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #6366F1; @@ -1593,6 +2803,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1619,25 +2867,88 @@ border: 2px solid #6366F1; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } .p-slider .p-slider-range { background: #6366F1; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #6366F1; border-color: #6366F1; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #6366F1; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; border-color: #6366F1; } + .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; @@ -1703,53 +3023,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { - background: #6366F1; - border-color: #6366F1; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #6366F1; @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #4F46E5; color: #ffffff; border-color: #4F46E5; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #4338CA; color: #ffffff; border-color: #4338CA; @@ -1774,12 +3194,12 @@ color: #6366F1; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(99, 102, 241, 0.16); color: #6366F1; border: 1px solid; @@ -1788,11 +3208,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1801,12 +3221,12 @@ color: #6366F1; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(99, 102, 241, 0.16); color: #6366F1; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -1895,331 +3315,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E2E8F0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #64748B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; + background: #0ea5e9; + border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #2563EB; + .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 { + background: #0284c7; color: #ffffff; - border-color: #2563EB; + border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BFDBFE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #1D4ED8; + .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 { + background: #0369a1; color: #ffffff; - border-color: #1D4ED8; + border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.04); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(59, 130, 246, 0.16); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.16); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(59, 130, 246, 0.04); + .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 { + background: rgba(14, 165, 233, 0.04); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(59, 130, 246, 0.16); + .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 { + background: rgba(14, 165, 233, 0.16); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BBF7D0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #15803D; color: #ffffff; border-color: #15803D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #22C55E; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; - background: #F59E0B; - border: 1px solid #F59E0B; + background: #f97316; + border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #D97706; + .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 { + background: #ea580c; color: #ffffff; - border-color: #D97706; + border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FDE68A; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #B45309; + .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 { + background: #c2410c; color: #ffffff; - border-color: #B45309; + border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.04); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(245, 158, 11, 0.16); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.16); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(245, 158, 11, 0.04); + .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 { + background: rgba(249, 115, 22, 0.04); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(245, 158, 11, 0.16); + .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 { + background: rgba(249, 115, 22, 0.16); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E9D5FF; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7E22CE; color: #ffffff; border-color: #7E22CE; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #A855F7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FECACA; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #B91C1C; color: #ffffff; border-color: #B91C1C; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #EF4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #4338CA; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #4338CA; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: #4b5563; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #022354; @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(99, 102, 241, 0.04); - color: #6366F1; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(99, 102, 241, 0.04); - color: #6366F1; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - border-color: transparent; - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - border-color: transparent; - color: #3B82F6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - border-color: transparent; - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - border-color: transparent; - color: #F59E0B; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: #4338CA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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; } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8f8fa; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #4338CA; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #374151; @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #374151; @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #4338CA; background: #EEF2FF; @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f9fafb; - color: #374151; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + border-color: #6366F1; + } + .p-orderlist .p-orderlist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #4338CA; @@ -3072,6 +4777,59 @@ background: #f3f4f6; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3193,31 +4992,72 @@ color: #374151; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + border-color: #6366F1; + } + .p-picklist .p-picklist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #4338CA; @@ -3248,6 +5098,117 @@ background: #f3f4f6; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #6366F1; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #374151; @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3657,6 +5908,7 @@ color: #374151; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #e5e7eb; + border-top: 1px solid #e5e7eb; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #e5e7eb; + border-left: 1px solid #e5e7eb; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #374151; @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #e5e7eb; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #ffffff; color: #4b5563; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4001,12 +6984,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4017,6 +7000,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4075,6 +7271,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #4338CA; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,25 +7444,76 @@ color: #6b7280; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { - padding: 0.25rem 0; + 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; } .p-contextmenu .p-submenu-list { - padding: 0.25rem 0; + 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4233,6 +7557,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4377,6 +7985,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4392,6 +8010,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4403,16 +8022,16 @@ border-top-left-radius: 6px; } .p-megamenu .p-submenu-list { - padding: 0.25rem 0; - width: 12.5rem; + padding: 0.5rem 0; + min-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.25rem 0; + min-width: 12.5rem; + padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4444,14 +8063,93 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4496,6 +8194,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4608,6 +8431,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4619,11 +8452,12 @@ color: #6b7280; } .p-menubar .p-submenu-list { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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.25rem 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #f9fafb; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #6b7280; @@ -4766,7 +8605,7 @@ color: #374151; } .p-panelmenu .p-panelmenu-content { - padding: 0.25rem 0; + padding: 0.5rem 0; border: 1px solid #e5e7eb; background: #ffffff; color: #4b5563; @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .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; @@ -4822,6 +8670,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #4b5563; @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #6366F1; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4948,10 +8950,20 @@ outline: 0 none; } .p-tieredmenu .p-submenu-list { - padding: 0.25rem 0; + 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4996,6 +9008,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #ff5757; } + .p-inline-message.p-inline-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #ff5757; } + .p-message.p-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f9fafb; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #6366F1; color: #ffffff; @@ -5437,17 +10098,25 @@ color: #ffffff; } .p-badge.p-badge-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-badge.p-badge-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-badge.p-badge-danger { background-color: #EF4444; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f3f4f6; @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #6366F1; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #6366F1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #cc8925; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #6366F1; color: #ffffff; @@ -5614,26 +10680,59 @@ color: #ffffff; } .p-tag.p-tag-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-tag.p-tag-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-tag.p-tag-danger { background-color: #EF4444; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #4b5563; @@ -5648,7 +10747,7 @@ } @layer primevue { .p-button-label { - font-weight: 700; + font-weight: 600; } .p-selectbutton > .p-button, @@ -5664,6 +10763,10 @@ 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; } @@ -5682,10 +10785,10 @@ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; @@ -5717,4 +10820,14 @@ .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/Inter-italic.var.woff2 b/public/themes/lara-light-pink/fonts/Inter-italic.var.woff2 new file mode 100644 index 0000000..b826d5a Binary files /dev/null and b/public/themes/lara-light-pink/fonts/Inter-italic.var.woff2 differ diff --git a/public/themes/lara-light-pink/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-pink/fonts/Inter-roman.var.woff2 new file mode 100644 index 0000000..6a256a0 Binary files /dev/null and b/public/themes/lara-light-pink/fonts/Inter-roman.var.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 0000000..8c428f1 --- /dev/null +++ b/public/themes/lara-light-pink/theme.css @@ -0,0 +1,10833 @@ +: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("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2"); +} +@font-face { + font-family: "Inter var"; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: "Italic"; + src: url("./fonts/Inter-italic.var.woff2?v=3.19") 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 primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + + * { + 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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { + right: 0.75rem; + } + .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; + } + .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { + border-color: #ec4899; + } + .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } + .p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; + outline-color: transparent; + } + .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; + background: #e5e7eb; + color: #4b5563; + border-radius: 16px; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; + } + .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } + .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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #be185d; + background: #fdf2f8; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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 { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + + .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; + outline-color: transparent; + } + .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; + outline-color: 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; + outline-color: transparent; + } + .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.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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) { + outline-color: transparent; + } + .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; + } + + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + + .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 { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .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; + 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-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-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-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + + .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-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: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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; + } + + .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-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-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%; + } + + .p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #e24c4c; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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-fluid .p-inputtext { + width: 100%; + } + + .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-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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-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; + outline-color: transparent; + } + .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 { + display: inline-flex; + } + + .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-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 { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + + .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; + outline-color: transparent; + } + .p-slider .p-slider-handle:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-slider .p-slider-range { + background: #ec4899; + border-radius: 6px; + } + .p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #ec4899; + border-color: #ec4899; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + + .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; + outline-color: transparent; + } + .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-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-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-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 { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { + 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; + outline-color: transparent; + } + .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-visible { + 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-label { + margin-left: 0.5rem; + } + .p-button.p-button-loading-label-only .p-button-loading-icon { + margin-right: 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + + .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-icon { + width: 1.3rem; + height: 1.3rem; + } + + .p-speeddial-list { + outline: 0 none; + } + + .p-speeddial-item.p-focus > .p-speeddial-action { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + + .p-speeddial-action { + width: 3rem; + height: 3rem; + background: #4b5563; + color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-speeddial-action:hover { + background: #022354; + color: #fff; + } + + .p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; + } + + .p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem 0; + } + .p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; + } + + .p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; + } + + .p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; + } + .p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; + } + + .p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; + } + .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; + } + + .p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); + border-radius: 6px; + } + + .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; + } + + .p-splitbutton { + border-radius: 6px; + } + .p-splitbutton.p-button-rounded { + border-radius: 2rem; + } + .p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; + } + .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-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; + } + + .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; + outline-color: transparent; + margin: 0.5rem; + } + .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-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 { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + + .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):hover { + background: #f3f4f6; + color: #374151; + } + .p-datatable .p-sortable-column:not(.p-highlight):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:hover { + background: #fdf2f8; + color: #be185d; + } + .p-datatable .p-sortable-column.p-highlight: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; + outline-color: transparent; + } + .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:focus-visible { + outline: 0.15rem solid #fbcfe8; + outline-offset: -0.15rem; + } + .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-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-datatable .p-column-resizer-helper { + background: #ec4899; + } + .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-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-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-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; + outline-color: transparent; + } + .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; + outline-color: transparent; + } + .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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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 { + 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.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-controls { + padding: 1.25rem; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; + } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } + .p-orderlist .p-orderlist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-orderlist .p-orderlist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + + .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%; + outline-color: transparent; + } + .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-default { + display: flex; + } + + .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; + } + + .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; + margin-right: 0.5rem; + height: 3rem; + } + .p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; + } + .p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .p-paginator .p-paginator-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 { + 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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + } + .p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; + } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } + .p-picklist .p-picklist-header { + color: #374151; + padding: 1.25rem; + font-weight: 700; + } + .p-picklist .p-picklist-list { + color: #4b5563; + padding: 0.75rem 0; + outline: 0 none; + } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } + .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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .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-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { + background: #f8f8fa; + } + .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { + background: #f3f4f6; + } + + .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; + } + + .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-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + + .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; + outline-color: transparent; + } + .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-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-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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 + .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-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; + } + .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-datatable-header { + border-width: 1px 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; + } + .p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.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-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + + .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; + outline-color: transparent; + } + .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 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-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; + } + + .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; + outline-color: transparent; + } + .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 a:hover { + color: #374151; + } + .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-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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + + .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 solid #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 solid #e5e7eb; + } + .p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; + } + + .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; + } + + .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; + outline-color: transparent; + } + .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 .p-panel-content { + padding: 1.25rem; + border: 1px solid #e5e7eb; + background: #ffffff; + color: #4b5563; + border-top: 0 none; + } + .p-panel .p-panel-content:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-panel .p-panel-footer { + padding: 0.75rem 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-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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + + .p-scrollpanel .p-scrollpanel-bar { + background: #f9fafb; + border: 0 none; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-scrollpanel .p-scrollpanel-bar:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 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; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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 { + 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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; + outline-color: transparent; + } + .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-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; + outline-color: transparent; + } + .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 { + 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; + } + + .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 { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-confirm-popup:before { + border-style: solid; + 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-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + .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; + outline-color: transparent; + margin-right: 0.5rem; + } + .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: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; + display: flex; + justify-content: flex-end; + gap: 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; + } + .p-dialog.p-confirm-dialog .p-confirm-dialog-message:not(:first-child) { + margin-left: 1rem; + } + + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + + .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-style: solid; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + } + .p-overlaypanel:before { + border-style: solid; + 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-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } + .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-header-content { + font-weight: 700; + font-size: 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; + outline-color: transparent; + } + .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 { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.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-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + + .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.p-fileupload-choose.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .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-fileupload-content.p-fileupload-highlight { + border: 1px dashed #ec4899; + background-color: #fdf2f8; + } + .p-fileupload .p-fileupload-file { + padding: 1rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + gap: 0.5rem; + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file:last-child { + margin-bottom: 0; + } + .p-fileupload .p-fileupload-file-name { + margin-bottom: 0.5rem; + } + .p-fileupload .p-fileupload-file-size { + margin-right: 0.5rem; + } + .p-fileupload .p-progressbar { + height: 0.25rem; + } + .p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; + } + .p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; + } + + .p-fileupload-choose:not(.p-disabled):hover { + background: #db2777; + color: #ffffff; + border-color: #db2777; + } + .p-fileupload-choose:not(.p-disabled):active { + background: #be185d; + color: #ffffff; + border-color: #be185d; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + + .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; + min-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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .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-link { + width: 4rem; + height: 4rem; + } + .p-dock.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; + } + .p-dock.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; + } + .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; + } + .p-dock.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; + } + .p-dock.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; + } + .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; + } + .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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + + .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 { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + border-radius: 6px; + } + .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; + min-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 { + min-width: 12.5rem; + padding: 0.5rem 0; + } + .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } + + .p-menu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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); + min-width: 12.5rem; + border-radius: 6px; + } + .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; + outline-color: transparent; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 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; + outline-color: transparent; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { + color: #6b7280; + padding: 1.25rem; + font-weight: 700; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon { + margin-right: 0.5rem; + } + .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-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 { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + + .p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .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 { + 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; + } + + .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; + outline-color: transparent; + } + .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 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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + + .p-tieredmenu { + padding: 0.5rem 0; + background: #ffffff; + color: #4b5563; + border: 1px solid #e5e7eb; + border-radius: 6px; + min-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); + border-radius: 6px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; + } + .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: #f3f4f6; + } + .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } + .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 { + 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; + } + + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; + } + .p-inline-message .p-inline-message-text { + font-size: 1rem; + } + .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; + } + + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + + .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; + outline-color: transparent; + } + .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-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } + .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-icon:not(.p-message-close-icon) { + width: 1.5rem; + height: 1.5rem; + } + + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + + .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; + border-width: 0 0 0 6px; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; + } + .p-toast .p-toast-message .p-toast-message-content .p-toast-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; + outline-color: transparent; + } + .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-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + + .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-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-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 { + outline-color: transparent; + } + .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 { + 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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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 i { + font-size: 1.5rem; + } + .p-image-action.p-link .p-icon { + width: 1.5rem; + height: 1.5rem; + } + + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + + .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-group .p-avatar { + border: 2px solid #ffffff; + } + + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + } + .p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; + } + + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + + .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 { + margin-left: 0.5rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .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-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 .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; + outline-color: transparent; + } + .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 { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ec4899; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #ec4899; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } + .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-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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-svg { + animation: p-progress-spinner-rotate 2s linear infinite; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #ff5757; + 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: #ff5757; + } + 40% { + stroke: #3b82f6; + } + 66% { + stroke: #1ea97c; + } + 80%, 90% { + stroke: #cc8925; + } + } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + + .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 { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } + .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 { + 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; + } + + .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-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } + .p-tag .p-tag-icon { + font-size: 0.75rem; + } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } + .p-tag .p-tag-icon.p-icon { + width: 0.75rem; + height: 0.75rem; + } + + .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; + } + + .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; + } +} +@layer primevue { + .p-button-label { + font-weight: 600; + } + + .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 black; + } + .p-button.p-button-secondary:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; + } + .p-button.p-button-success:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; + } + .p-button.p-button-info:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; + } + .p-button.p-button-warning:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; + } + .p-button.p-button-help:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; + } + .p-button.p-button-danger:enabled:focus { + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; + } + + .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 black; + } + + .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/theme.css b/public/themes/lara-light-purple/theme.css index 7ae2237..52fba8c 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -290,6 +290,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -332,6 +452,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -382,6 +599,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -404,7 +622,7 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-autocomplete.p-invalid.p-component > .p-inputtext { @@ -430,6 +648,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #6D28D9; background: #F5F3FF; @@ -438,10 +662,6 @@ background: rgba(139, 92, 246, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -453,6 +673,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -547,6 +918,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #6D28D9; @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #374151; @@ -646,6 +1019,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; } @@ -654,6 +1034,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -662,6 +1045,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; } @@ -671,16 +1057,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -691,6 +1163,15 @@ 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; @@ -732,6 +1213,12 @@ 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; @@ -740,10 +1227,6 @@ 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: #e5e7eb; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f3f4f6; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -776,6 +1281,7 @@ 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; @@ -786,41 +1292,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #8B5CF6; background: #8B5CF6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #8B5CF6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #6D28D9; - background: #6D28D9; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #8B5CF6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -832,6 +1396,7 @@ } .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; @@ -841,7 +1406,7 @@ border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -862,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -880,11 +1453,107 @@ 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; @@ -895,6 +1564,18 @@ 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; } @@ -960,6 +1641,12 @@ 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; @@ -968,13 +1655,14 @@ 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: #e5e7eb; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1093,30 +2025,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #8B5CF6; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #7C3AED; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1128,6 +2062,7 @@ 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; @@ -1141,6 +2076,15 @@ .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; @@ -1160,27 +2104,15 @@ color: #e24c4c; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #6b7280; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #6b7280; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,6 +2243,12 @@ 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; @@ -1276,12 +2270,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; - background: #e5e7eb; + 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; @@ -1292,11 +2290,118 @@ border-color: #e24c4c; } + .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; @@ -1307,6 +2412,15 @@ 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; @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #374151; @@ -1397,6 +2512,12 @@ 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; @@ -1405,10 +2526,6 @@ 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: #e5e7eb; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -1428,14 +2545,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #8B5CF6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #DDD6FE; - border-color: #8B5CF6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #8B5CF6; background: #8B5CF6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #8B5CF6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1540,7 +2751,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; - border-color: #8B5CF6; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #8B5CF6; @@ -1593,6 +2803,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1619,25 +2867,88 @@ border: 2px solid #8B5CF6; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } .p-slider .p-slider-range { background: #8B5CF6; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #8B5CF6; border-color: #8B5CF6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #8B5CF6; @@ -1648,6 +2959,15 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; border-color: #8B5CF6; } + .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; @@ -1703,53 +3023,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { - background: #8B5CF6; - border-color: #8B5CF6; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #7C3AED; - border-color: #7C3AED; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #8B5CF6; @@ -1758,13 +3177,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #7C3AED; color: #ffffff; border-color: #7C3AED; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #6D28D9; color: #ffffff; border-color: #6D28D9; @@ -1774,12 +3194,12 @@ color: #8B5CF6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(139, 92, 246, 0.16); color: #8B5CF6; border: 1px solid; @@ -1788,11 +3208,11 @@ color: #6b7280; border-color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } @@ -1801,12 +3221,12 @@ color: #8B5CF6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(139, 92, 246, 0.16); color: #8B5CF6; border-color: transparent; @@ -1814,15 +3234,15 @@ .p-button.p-button-text.p-button-plain { color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -1895,331 +3315,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E2E8F0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #64748B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; + background: #0ea5e9; + border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #2563EB; + .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 { + background: #0284c7; color: #ffffff; - border-color: #2563EB; + border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BFDBFE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #1D4ED8; + .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 { + background: #0369a1; color: #ffffff; - border-color: #1D4ED8; + border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.04); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(59, 130, 246, 0.16); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.16); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(59, 130, 246, 0.04); + .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 { + background: rgba(14, 165, 233, 0.04); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(59, 130, 246, 0.16); + .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 { + background: rgba(14, 165, 233, 0.16); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BBF7D0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #15803D; color: #ffffff; border-color: #15803D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #22C55E; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; - background: #F59E0B; - border: 1px solid #F59E0B; + background: #f97316; + border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #D97706; + .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 { + background: #ea580c; color: #ffffff; - border-color: #D97706; + border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FDE68A; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #B45309; + .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 { + background: #c2410c; color: #ffffff; - border-color: #B45309; + border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.04); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(245, 158, 11, 0.16); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.16); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(245, 158, 11, 0.04); + .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 { + background: rgba(249, 115, 22, 0.04); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(245, 158, 11, 0.16); + .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 { + background: rgba(249, 115, 22, 0.16); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E9D5FF; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7E22CE; color: #ffffff; border-color: #7E22CE; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #A855F7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FECACA; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #B91C1C; color: #ffffff; border-color: #B91C1C; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #EF4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #6D28D9; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #6D28D9; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2247,6 +3793,8 @@ height: 3rem; background: #4b5563; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #022354; @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(139, 92, 246, 0.04); - color: #8B5CF6; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(139, 92, 246, 0.04); - color: #8B5CF6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - border-color: transparent; - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - border-color: transparent; - color: #3B82F6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - border-color: transparent; - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - border-color: transparent; - color: #F59E0B; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2603,6 +4009,241 @@ color: #6D28D9; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2737,6 +4379,10 @@ 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; } @@ -2816,17 +4462,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8f8fa; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #6D28D9; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #374151; @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #374151; @@ -2970,6 +4614,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #6D28D9; background: #F5F3FF; @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f9fafb; - color: #374151; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + border-color: #8B5CF6; + } + .p-orderlist .p-orderlist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,13 +4745,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #6D28D9; @@ -3072,6 +4777,59 @@ background: #f3f4f6; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3104,6 +4862,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3111,6 +4870,46 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3193,31 +4992,72 @@ color: #374151; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + border-color: #8B5CF6; + } + .p-picklist .p-picklist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,13 +5066,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #6D28D9; @@ -3248,6 +5098,117 @@ background: #f3f4f6; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #8B5CF6; border-radius: 50%; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #374151; @@ -3321,7 +5365,7 @@ .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 { + .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 { @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3469,7 +5683,7 @@ .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 { + .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 { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3657,6 +5908,7 @@ color: #374151; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #e5e7eb; + border-top: 1px solid #e5e7eb; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #e5e7eb; + border-left: 1px solid #e5e7eb; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #374151; @@ -3756,10 +6085,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3767,6 +6153,66 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3780,6 +6226,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3790,6 +6237,244 @@ background: #e5e7eb; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,6 +6495,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3832,6 +6518,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3960,14 +6875,12 @@ background: #ffffff; color: #4b5563; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4001,12 +6984,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4017,6 +7000,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4075,6 +7271,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4139,6 +7379,38 @@ border-color: #6D28D9; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4148,6 +7420,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4171,25 +7444,76 @@ color: #6b7280; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { - padding: 0.25rem 0; + 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; } .p-contextmenu .p-submenu-list { - padding: 0.25rem 0; + 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4225,7 +7549,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4233,6 +7557,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4369,7 +7977,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4377,6 +7985,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4392,6 +8010,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4403,16 +8022,16 @@ border-top-left-radius: 6px; } .p-megamenu .p-submenu-list { - padding: 0.25rem 0; - width: 12.5rem; + padding: 0.5rem 0; + min-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.25rem 0; + min-width: 12.5rem; + padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4444,14 +8063,93 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4488,7 +8186,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4496,6 +8194,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4600,7 +8423,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4608,6 +8431,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4619,11 +8452,12 @@ color: #6b7280; } .p-menubar .p-submenu-list { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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.25rem 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #f9fafb; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #6b7280; @@ -4766,7 +8605,7 @@ color: #374151; } .p-panelmenu .p-panelmenu-content { - padding: 0.25rem 0; + padding: 0.5rem 0; border: 1px solid #e5e7eb; background: #ffffff; color: #4b5563; @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4814,7 +8662,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .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; @@ -4822,6 +8670,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #4b5563; @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4931,13 +8884,62 @@ color: #8B5CF6; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4948,10 +8950,20 @@ outline: 0 none; } .p-tieredmenu .p-submenu-list { - padding: 0.25rem 0; + 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4988,7 +9000,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4996,6 +9008,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #ff5757; } + .p-inline-message.p-inline-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #ff5757; } + .p-message.p-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5338,6 +9850,9 @@ background: rgba(255, 255, 255, 0.1); color: #f9fafb; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5348,6 +9863,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5419,6 +10047,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #8B5CF6; color: #ffffff; @@ -5437,17 +10098,25 @@ color: #ffffff; } .p-badge.p-badge-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-badge.p-badge-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-badge.p-badge-danger { background-color: #EF4444; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5485,6 +10192,7 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5495,10 +10203,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f3f4f6; @@ -5510,6 +10237,210 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8B5CF6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #8B5CF6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5526,6 +10457,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #cc8925; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5601,6 +10651,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #8B5CF6; color: #ffffff; @@ -5614,26 +10680,59 @@ color: #ffffff; } .p-tag.p-tag-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-tag.p-tag-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-tag.p-tag-danger { background-color: #EF4444; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #4b5563; @@ -5648,7 +10747,7 @@ } @layer primevue { .p-button-label { - font-weight: 700; + font-weight: 600; } .p-selectbutton > .p-button, @@ -5664,6 +10763,10 @@ 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; } @@ -5682,10 +10785,10 @@ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; @@ -5717,4 +10820,14 @@ .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/theme.css b/public/themes/lara-light-teal/theme.css index 7468cf8..73988f5 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -12,7 +12,7 @@ --surface-f:#ffffff; --text-color:#4b5563; --text-color-secondary:#6b7280; - --primary-color:#10b981; + --primary-color:#14b8a6; --primary-color-text:#ffffff; --surface-0: #ffffff; --surface-50: #f9fafb; @@ -44,10 +44,10 @@ --surface-overlay:#ffffff; --surface-border:#dfe7ef; --surface-hover:#f6f9fc; - --focus-ring: 0 0 0 0.2rem #a7f3d0; + --focus-ring: 0 0 0 0.2rem #99f6e4; --maskbg: rgba(0, 0, 0, 0.4); - --highlight-bg: #F0FDFA; - --highlight-text-color: #047857; + --highlight-bg: #f0fdfa; + --highlight-text-color: #0f766e; color-scheme: light; } @@ -178,16 +178,16 @@ --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; + --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 { @@ -271,25 +271,145 @@ .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; + 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: #10b981; + 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: #10b981; + 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: #10b981; + color: #14b8a6; } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -332,11 +452,12 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 6px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-component-overlay-enter { @@ -364,6 +485,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -371,17 +588,18 @@ right: 3.75rem; } .p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container { - border-color: #10b981; + border-color: #14b8a6; } .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; } .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -404,7 +622,7 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-autocomplete.p-invalid.p-component > .p-inputtext { @@ -430,18 +648,20 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + background: rgba(20, 184, 166, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #4b5563; - background: #e5e7eb; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -453,14 +673,164 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .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; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; } .p-datepicker { @@ -497,6 +867,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -508,7 +879,7 @@ .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; @@ -522,7 +893,7 @@ } .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; + color: #14b8a6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -547,15 +918,16 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-datepicker table td > span:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-datepicker table td.p-datepicker-today > span { background: #d1d5db; @@ -563,8 +935,8 @@ border-color: transparent; } .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -585,6 +957,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #374151; @@ -594,7 +967,7 @@ .p-datepicker .p-timepicker button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-datepicker .p-timepicker button:last-child { margin-top: 0.2em; @@ -617,8 +990,8 @@ border-radius: 6px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -629,8 +1002,8 @@ border-radius: 6px; } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid #e5e7eb; @@ -646,13 +1019,23 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .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; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; @@ -660,7 +1043,10 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; @@ -668,28 +1054,123 @@ .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; + 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; + border-color: #14b8a6; } .p-cascadeselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + 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; @@ -732,18 +1213,20 @@ 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; + color: #0f766e; + background: #f0fdfa; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + 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: #e5e7eb; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -754,20 +1237,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f3f4f6; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .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; + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -776,6 +1281,7 @@ 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; @@ -786,52 +1292,111 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { - border-color: #10b981; - background: #10b981; + .p-checkbox.p-highlight .p-checkbox-box { + border-color: #14b8a6; + background: #14b8a6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #10b981; + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #14b8a6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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 #a7f3d0; - border-color: #10b981; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #047857; - background: #047857; - color: #ffffff; + 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-checkbox-box.p-highlight { - background: #10b981; + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #14b8a6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - background: #047857; + .p-input-filled .p-checkbox: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: #10b981; + 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 #a7f3d0; - border-color: #10b981; + 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; @@ -841,7 +1406,7 @@ border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: #d1d5db; + background: #e5e7eb; color: #4b5563; } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -862,6 +1427,14 @@ border-color: #e24c4c; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -880,20 +1453,128 @@ 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; + border-color: #14b8a6; } .p-dropdown:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + 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; @@ -960,21 +1641,28 @@ 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; + color: #0f766e; + background: #f0fdfa; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + 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: #e5e7eb; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -988,17 +1676,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1071,18 +1839,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1093,30 +2025,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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 #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #10b981; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #059669; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1128,19 +2062,29 @@ 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; + border-color: #14b8a6; } .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + 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; @@ -1160,27 +2104,15 @@ color: #e24c4c; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #6b7280; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #6b7280; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1220,12 +2152,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1255,9 +2243,15 @@ 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; + color: #0f766e; + background: #f0fdfa; } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1272,40 +2266,160 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + 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: #e5e7eb; + 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; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; } .p-listbox.p-invalid { border-color: #e24c4c; } + .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; + border-color: #14b8a6; } .p-multiselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + 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; @@ -1374,6 +2488,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #374151; @@ -1383,7 +2498,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-multiselect-panel .p-multiselect-items { padding: 0.75rem 0; @@ -1397,18 +2512,20 @@ 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; + color: #0f766e; + background: #f0fdfa; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + 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: #e5e7eb; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } @@ -1428,14 +2545,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1464,10 +2598,55 @@ 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; @@ -1476,15 +2655,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #10b981; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1492,38 +2663,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { - border-color: #10b981; - background: #10b981; + .p-radiobutton.p-highlight .p-radiobutton-box { + border-color: #14b8a6; + background: #14b8a6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - border-color: #047857; - background: #047857; - color: #ffffff; + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { + .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 .p-radiobutton-box.p-highlight { - background: #10b981; + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #0f766e; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - 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; @@ -1539,14 +2750,13 @@ .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { - color: #10b981; + color: #14b8a6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #10b981; + color: #14b8a6; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; @@ -1572,8 +2782,8 @@ color: #374151; } .p-selectbutton .p-button.p-highlight { - background: #10b981; - border-color: #10b981; + background: #14b8a6; + border-color: #14b8a6; color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, @@ -1581,8 +2791,8 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { - background: #059669; - border-color: #059669; + background: #0d9488; + border-color: #0d9488; color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, @@ -1593,6 +2803,44 @@ border-color: #e24c4c; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1616,21 +2864,83 @@ height: 1.143rem; width: 1.143rem; background: #ffffff; - border: 2px solid #10b981; + border: 2px solid #14b8a6; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-slider .p-slider-range { - background: #10b981; + background: #14b8a6; + border-radius: 6px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #10b981; - border-color: #10b981; + background: #14b8a6; + border-color: #14b8a6; + } + + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; } .p-treeselect { @@ -1638,15 +2948,25 @@ 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-treeselect:not(.p-disabled):hover { - border-color: #10b981; + border-color: #14b8a6; } .p-treeselect:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } + .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; @@ -1703,129 +3023,229 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + .p-togglebutton.p-highlight .p-button { + background: #14b8a6; + border-color: #14b8a6; + color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + .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.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .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.p-button.p-highlight { - background: #10b981; - border-color: #10b981; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + background: #0d9488; + border-color: #0d9488; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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.p-button.p-highlight:hover { - background: #059669; - border-color: #059669; - 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-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; - background: #10b981; - border: 1px solid #10b981; + 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; + outline-color: transparent; } - .p-button:enabled:hover { - background: #059669; + .p-button:not(:disabled):hover { + background: #0d9488; color: #ffffff; - border-color: #059669; + border-color: #0d9488; } - .p-button:enabled:active { - background: #047857; + .p-button:not(:disabled):active { + background: #0f766e; color: #ffffff; - border-color: #047857; + border-color: #0f766e; } .p-button.p-button-outlined { background-color: transparent; - color: #10b981; + color: #14b8a6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; + .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:enabled:active { - background: rgba(16, 185, 129, 0.16); - color: #10b981; + .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:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .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; + color: #14b8a6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; + .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:enabled:active { - background: rgba(16, 185, 129, 0.16); - color: #10b981; + .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:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f3f4f6; color: #6b7280; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #6b7280; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-button .p-button-label { transition-duration: 0.2s; @@ -1847,7 +3267,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #10b981; + color: #14b8a6; background-color: #ffffff; } .p-button.p-button-raised { @@ -1895,331 +3315,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E2E8F0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #64748B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; + background: #0ea5e9; + border: 1px solid #0ea5e9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { - background: #2563EB; + .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 { + background: #0284c7; color: #ffffff; - border-color: #2563EB; + border-color: #0284c7; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BFDBFE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { - background: #1D4ED8; + .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 { + background: #0369a1; color: #ffffff; - border-color: #1D4ED8; + border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.04); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { - background: rgba(59, 130, 246, 0.16); - color: #3B82F6; + .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 { + background: rgba(14, 165, 233, 0.16); + color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { - background: rgba(59, 130, 246, 0.04); + .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 { + background: rgba(14, 165, 233, 0.04); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { - background: rgba(59, 130, 246, 0.16); + .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 { + background: rgba(14, 165, 233, 0.16); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #BBF7D0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #15803D; color: #ffffff; border-color: #15803D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #22C55E; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; - background: #F59E0B; - border: 1px solid #F59E0B; + background: #f97316; + border: 1px solid #f97316; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { - background: #D97706; + .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 { + background: #ea580c; color: #ffffff; - border-color: #D97706; + border-color: #ea580c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FDE68A; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { - background: #B45309; + .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 { + background: #c2410c; color: #ffffff; - border-color: #B45309; + border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.04); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { - background: rgba(245, 158, 11, 0.16); - color: #F59E0B; + .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 { + background: rgba(249, 115, 22, 0.16); + color: #f97316; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #F59E0B; + color: #f97316; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { - background: rgba(245, 158, 11, 0.04); + .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 { + background: rgba(249, 115, 22, 0.04); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { - background: rgba(245, 158, 11, 0.16); + .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 { + background: rgba(249, 115, 22, 0.16); border-color: transparent; - color: #F59E0B; + color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #E9D5FF; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7E22CE; color: #ffffff; border-color: #7E22CE; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #A855F7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #FECACA; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #B91C1C; color: #ffffff; border-color: #B91C1C; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #EF4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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; + color: #0f766e; background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #047857; + color: #0f766e; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #047857; + color: #0f766e; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2239,7 +3785,7 @@ .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-speeddial-action { @@ -2247,6 +3793,8 @@ height: 3rem; background: #4b5563; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #022354; @@ -2299,263 +3847,120 @@ border-radius: 6px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(16, 185, 129, 0.04); - color: #10b981; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f3f4f6; - color: #6b7280; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - border-color: transparent; - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - border-color: transparent; - color: #3B82F6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - border-color: transparent; - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - border-color: transparent; - color: #F59E0B; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2567,6 +3972,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2579,7 +3985,7 @@ .p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-carousel .p-carousel-indicators { padding: 1rem; @@ -2599,8 +4005,243 @@ background: #9ca3af; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; + } + + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; } .p-datatable .p-paginator-top { @@ -2655,8 +4296,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):hover { @@ -2667,21 +4308,21 @@ color: #374151; } .p-datatable .p-sortable-column.p-highlight { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { - color: #047857; + color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { - color: #047857; + color: #0f766e; } .p-datatable .p-sortable-column:focus-visible { - box-shadow: inset 0 0 0 0.15rem #a7f3d0; + box-shadow: inset 0 0 0 0.15rem #99f6e4; outline: 0 none; } .p-datatable .p-datatable-tbody > tr { @@ -2706,6 +4347,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2721,7 +4363,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { margin-right: 0.5rem; @@ -2730,25 +4372,29 @@ font-weight: 700; } .p-datatable .p-datatable-tbody > tr:focus-visible { - outline: 0.15rem solid #a7f3d0; + outline: 0.15rem solid #99f6e4; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + 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 #F0FDFA; + 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; + box-shadow: inset 0 -2px 0 0 #f0fdfa; } .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } .p-datatable .p-column-resizer-helper { - background: #10b981; + background: #14b8a6; } .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, @@ -2816,18 +4462,18 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8f8fa; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { - background: #F0FDFA; - color: #047857; + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #f0fdfa; + color: #0f766e; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { - color: #047857; + .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:nth-child(even).p-highlight .p-row-toggler:hover { - color: #047857; + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #0f766e; } .p-datatable.p-datatable-sm .p-datatable-header { padding: 0.5rem 0.5rem; @@ -2882,10 +4528,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -2910,6 +4552,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #374151; @@ -2921,13 +4564,13 @@ 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; + background: #f0fdfa; + color: #0f766e; } .p-column-filter-menu-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-column-filter-clear-button { @@ -2938,6 +4581,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #374151; @@ -2947,7 +4591,7 @@ .p-column-filter-clear-button:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-column-filter-overlay { @@ -2970,9 +4614,15 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + 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; @@ -2981,7 +4631,7 @@ .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; + 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; @@ -3017,31 +4667,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f9fafb; - color: #374151; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } + .p-orderlist .p-orderlist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3050,20 +4745,30 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + background: rgba(20, 184, 166, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: #f8f8fa; @@ -3072,13 +4777,66 @@ background: #f3f4f6; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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; + background: #f0fdfa; + color: #0f766e; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { color: #80eed5; @@ -3104,11 +4862,52 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .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; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + + .p-paginator-default { + display: flex; + } + + .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; } .p-paginator { @@ -3183,9 +4982,9 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: #F0FDFA; - border-color: #F0FDFA; - color: #047857; + background: #f0fdfa; + border-color: #f0fdfa; + color: #0f766e; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: #f3f4f6; @@ -3193,31 +4992,72 @@ color: #374151; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } + .p-picklist .p-picklist-header { + color: #374151; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 6px; - border-top-left-radius: 6px; } .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:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; margin: 0; @@ -3226,20 +5066,30 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #4b5563; - background: #e5e7eb; + background: #f3f4f6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(16, 185, 129, 0.24); + background: rgba(20, 184, 166, 0.24); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: #f8f8fa; @@ -3248,8 +5098,119 @@ background: #f3f4f6; } + .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; + } + .p-timeline .p-timeline-event-marker { - border: 2px solid #10b981; + border: 2px solid #14b8a6; border-radius: 50%; width: 1rem; height: 1rem; @@ -3273,6 +5234,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3287,7 +5330,7 @@ .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; + box-shadow: inset 0 0 0 0.15rem #99f6e4; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3303,6 +5346,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #374151; @@ -3312,7 +5356,7 @@ .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; + 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; @@ -3321,20 +5365,20 @@ .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 { + .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; + background: #f0fdfa; + 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: #047857; + 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: #047857; + color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: #f3f4f6; @@ -3362,6 +5406,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3406,7 +5619,7 @@ background: #f9fafb; } .p-treetable .p-sortable-column { - outline-color: #a7f3d0; + outline-color: #99f6e4; } .p-treetable .p-sortable-column .p-sortable-column-icon { color: #374151; @@ -3417,8 +5630,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -3429,11 +5642,11 @@ color: #374151; } .p-treetable .p-sortable-column.p-highlight { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { - color: #047857; + color: #0f766e; } .p-treetable .p-treetable-tbody > tr { background: #ffffff; @@ -3454,6 +5667,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3464,27 +5678,27 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .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 { + .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: 0.15rem solid #99f6e4; outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { - color: #047857; + color: #0f766e; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { - color: #047857; + color: #0f766e; } .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: #f3f4f6; @@ -3494,7 +5708,7 @@ color: #4b5563; } .p-treetable .p-column-resizer-helper { - background: #10b981; + background: #14b8a6; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -3559,6 +5773,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3567,6 +5798,7 @@ font-weight: 700; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3574,7 +5806,7 @@ .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 0.2rem #a7f3d0; + box-shadow: inset 0 0 0 0.2rem #99f6e4; } .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { background: #f3f4f6; @@ -3634,6 +5866,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3657,6 +5908,7 @@ color: #374151; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3664,7 +5916,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { color: #374151; @@ -3678,6 +5930,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3686,7 +5994,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #e5e7eb; + border-top: 1px solid #e5e7eb; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3696,12 +6004,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #e5e7eb; + border-left: 1px solid #e5e7eb; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3721,6 +6049,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #374151; @@ -3730,7 +6059,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-panel.p-panel-toggleable .p-panel-header { padding: 0.75rem 1.25rem; @@ -3756,15 +6085,132 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; } .p-splitter { @@ -3780,16 +6226,255 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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: #f0fdfa; + 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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3810,11 +6495,12 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .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; + 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; @@ -3823,20 +6509,21 @@ } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #ffffff; - border-color: #10b981; - color: #10b981; + border-color: #14b8a6; + color: #14b8a6; } .p-tabview .p-tabview-nav-btn.p-link { background: #ffffff; - color: #10b981; + 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; + outline-color: transparent; } .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; + box-shadow: inset 0 0 0 0.2rem #99f6e4; } .p-tabview .p-tabview-panels { background: #ffffff; @@ -3847,6 +6534,26 @@ border-bottom-left-radius: 6px; } + .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; + } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -3858,6 +6565,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -3880,12 +6657,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3906,6 +6683,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -3931,6 +6845,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3941,7 +6856,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-right: 0; @@ -3960,14 +6875,12 @@ background: #ffffff; color: #4b5563; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3975,6 +6888,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -3986,7 +6969,7 @@ padding: 1.25rem; } .p-overlaypanel .p-overlaypanel-close { - background: #10b981; + background: #14b8a6; color: #ffffff; width: 2rem; height: 2rem; @@ -3997,16 +6980,16 @@ right: -1rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: #059669; + background: #0d9488; color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4017,6 +7000,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #4b5563; @@ -4026,6 +7162,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4035,6 +7175,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4046,7 +7187,7 @@ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-sidebar .p-sidebar-header + .p-sidebar-content { padding-top: 0; @@ -4055,6 +7196,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4075,6 +7271,50 @@ border-bottom-color: #4b5563; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4088,7 +7328,7 @@ .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-fileupload .p-fileupload-content { background: #ffffff; @@ -4099,8 +7339,8 @@ border-bottom-left-radius: 6px; } .p-fileupload .p-fileupload-content.p-fileupload-highlight { - border: 1px dashed #10b981; - background-color: #F0FDFA; + border: 1px dashed #14b8a6; + background-color: #f0fdfa; } .p-fileupload .p-fileupload-file { padding: 1rem; @@ -4129,14 +7369,46 @@ } .p-fileupload-choose:not(.p-disabled):hover { - background: #059669; + background: #0d9488; color: #ffffff; - border-color: #059669; + border-color: #0d9488; } .p-fileupload-choose:not(.p-disabled):active { - background: #047857; + background: #0f766e; color: #ffffff; - border-color: #047857; + border-color: #0f766e; + } + + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; } .p-breadcrumb { @@ -4148,11 +7420,12 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4171,25 +7444,76 @@ color: #6b7280; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { - padding: 0.25rem 0; + 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; } .p-contextmenu .p-submenu-list { - padding: 0.25rem 0; + 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4211,21 +7535,21 @@ color: #6b7280; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4233,6 +7557,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4255,6 +7589,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4271,7 +7711,7 @@ .p-dock .p-dock-item.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7f3d0; + box-shadow: inset 0 0 0 0.15rem #99f6e4; } .p-dock .p-dock-link { width: 4rem; @@ -4303,27 +7743,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f9fafb; @@ -4334,6 +7933,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4355,21 +7963,21 @@ color: #6b7280; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4377,6 +7985,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4392,6 +8010,7 @@ color: #4b5563; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4403,16 +8022,16 @@ border-top-left-radius: 6px; } .p-megamenu .p-submenu-list { - padding: 0.25rem 0; - width: 12.5rem; + padding: 0.5rem 0; + min-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.25rem 0; + min-width: 12.5rem; + padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4444,14 +8063,93 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6b7280; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6b7280; + background: #f3f4f6; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #e5e7eb; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4474,21 +8172,21 @@ color: #6b7280; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4496,6 +8194,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4525,6 +8233,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4565,6 +8379,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4586,21 +8409,21 @@ color: #6b7280; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4608,6 +8431,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4619,11 +8452,12 @@ color: #6b7280; } .p-menubar .p-submenu-list { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; border: 0 none; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 6px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #e5e7eb; @@ -4632,95 +8466,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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.25rem 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4730,6 +8568,7 @@ background: #f9fafb; border-radius: 6px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #6b7280; @@ -4745,7 +8584,7 @@ .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; + 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; @@ -4766,7 +8605,7 @@ color: #374151; } .p-panelmenu .p-panelmenu-content { - padding: 0.25rem 0; + padding: 0.5rem 0; border: 1px solid #e5e7eb; background: #ffffff; color: #4b5563; @@ -4779,6 +8618,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #4b5563; transition: box-shadow 0.2s; @@ -4800,21 +8648,21 @@ color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .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; @@ -4822,6 +8670,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -4846,11 +8704,65 @@ margin-bottom: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #4b5563; @@ -4870,11 +8782,11 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 700; @@ -4891,6 +8803,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -4911,6 +8863,7 @@ border-top-left-radius: 6px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4918,7 +8871,7 @@ .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; + 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; @@ -4927,17 +8880,66 @@ } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { background: #ffffff; - border-color: #10b981; - color: #10b981; + border-color: #14b8a6; + color: #14b8a6; + } + + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; } .p-tieredmenu { - padding: 0.25rem 0; + padding: 0.5rem 0; background: #ffffff; color: #4b5563; border: 1px solid #e5e7eb; border-radius: 6px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4948,10 +8950,20 @@ outline: 0 none; } .p-tieredmenu .p-submenu-list { - padding: 0.25rem 0; + 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #4b5563; @@ -4974,21 +8986,21 @@ color: #6b7280; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { - color: #047857; - background: #F0FDFA; + color: #0f766e; + background: #f0fdfa; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { - color: #047857; + 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: #047857; + color: #0f766e; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { - background: rgba(16, 185, 129, 0.24); + 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; + background: #f3f4f6; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #4b5563; @@ -4996,6 +9008,16 @@ .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-focus > .p-menuitem-content:hover { + color: #4b5563; + background: #f3f4f6; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #4b5563; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6b7280; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #4b5563; background: #f3f4f6; @@ -5018,6 +9040,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5059,6 +9101,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #ff5757; } + .p-inline-message.p-inline-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5070,6 +9130,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5083,6 +9192,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5090,7 +9200,7 @@ .p-message .p-message-close:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-message.p-message-info { background: rgba(219, 234, 254, 0.7); @@ -5140,6 +9250,30 @@ .p-message.p-message-error .p-message-close { color: #ff5757; } + .p-message.p-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5153,6 +9287,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 1; } @@ -5187,6 +9394,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,7 +9402,7 @@ .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-toast .p-toast-message.p-toast-message-info { background: rgba(219, 234, 254, 0.7); @@ -5236,6 +9444,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #64748B; + border: solid #64748B; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #1f2937; + border: solid #1f2937; + border-width: 0 0 0 6px; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5297,8 +9809,8 @@ background: #9ca3af; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #F0FDFA; - color: #047857; + background: #f0fdfa; + color: #0f766e; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; @@ -5316,8 +9828,8 @@ 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; + background: #f0fdfa; + color: #0f766e; } .p-galleria .p-galleria-thumbnail-container { background: rgba(0, 0, 0, 0.9); @@ -5338,16 +9850,93 @@ background: rgba(255, 255, 255, 0.1); color: #f9fafb; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .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; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5394,6 +9983,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5420,7 +10048,40 @@ } .p-badge { - background: #10b981; + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + + .p-badge { + background: #14b8a6; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -5437,17 +10098,25 @@ color: #ffffff; } .p-badge.p-badge-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-badge.p-badge-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-badge.p-badge-danger { background-color: #EF4444; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5461,6 +10130,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 6px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5485,20 +10192,40 @@ margin-left: 0.5rem; border-radius: 6px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } .p-chip .p-chip-remove-icon:focus { outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f3f4f6; @@ -5507,9 +10234,213 @@ .p-inplace .p-inplace-display:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #14b8a6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #14b8a6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5519,13 +10450,39 @@ .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #10b981; + background: #14b8a6; } .p-progressbar .p-progressbar-label { color: #ffffff; line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5571,6 +10528,67 @@ stroke: #cc8925; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5593,6 +10611,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -5602,7 +10652,23 @@ } .p-tag { - background: #10b981; + 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; + } + + .p-tag { + background: #14b8a6; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -5614,26 +10680,59 @@ color: #ffffff; } .p-tag.p-tag-info { - background-color: #3B82F6; + background-color: #0ea5e9; color: #ffffff; } .p-tag.p-tag-warning { - background-color: #F59E0B; + background-color: #f97316; color: #ffffff; } .p-tag.p-tag-danger { background-color: #EF4444; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #64748B; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #1f2937; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #4b5563; @@ -5648,7 +10747,7 @@ } @layer primevue { .p-button-label { - font-weight: 700; + font-weight: 600; } .p-selectbutton > .p-button, @@ -5664,16 +10763,20 @@ 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; + background-color: #14b8a6; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: #10b981; + background-color: #14b8a6; } .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71f3c8, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; @@ -5682,10 +10785,10 @@ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; @@ -5695,14 +10798,14 @@ } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #10b981; + 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 #10b981; + 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 #71f3c8, 0 1px 2px 0 black; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } .p-toast-message { @@ -5717,4 +10820,14 @@ .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 index a7a53b7..09911d2 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ 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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #212529; background: #FFE082; @@ -419,10 +643,6 @@ background: #ffe081; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #dedede; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #ffe081; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #4b4b4b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #4b4b4b; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #FFE082; background: #FFE082; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #FFE082; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #FFCA28; - background: #FFCA28; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #FFE082; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #FFCA28; } @@ -806,6 +1324,52 @@ border-color: #212529; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #ffe081; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #FFE082; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #323232; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #FFD54F; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #e57373; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #888888; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #888888; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #3c3c3c; + 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; @@ -1277,11 +2275,118 @@ border-color: #e57373; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #dedede; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #ffe081; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #FFE082; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #FFE082; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #FFE082; background: #FFE082; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #FFE082; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; - border-color: #FFE082; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #FFE082; @@ -1586,6 +2796,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #FFE082; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #FFE082; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #FFE082; border-color: #FFE082; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #FFE082; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } + .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; @@ -1696,53 +3016,152 @@ background-color: #4b4b4b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { - background: #FFE082; - border-color: #FFE082; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #FFE082; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #FFD54F; color: #212529; border-color: #FFD54F; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #FFCA28; color: #212529; border-color: #FFCA28; @@ -1767,12 +3187,12 @@ color: #FFE082; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #888888; border-color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } @@ -1794,12 +3214,12 @@ color: #FFE082; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #FFE082; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #B0BEC5; border: 1px solid #B0BEC5; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #90A4AE; color: #121212; border-color: #90A4AE; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #CFD8DC; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #78909C; color: #121212; border-color: #78909C; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #B0BEC5; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212529; background: #4FC3F7; border: 1px solid #4FC3F7; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #29B6F6; color: #212529; border-color: #29B6F6; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #E1F5FE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #03A9F4; color: #212529; border-color: #03A9F4; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #4FC3F7; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212529; background: #AED581; border: 1px solid #AED581; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #9CCC65; color: #212529; border-color: #9CCC65; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #F1F8E9; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #8BC34A; color: #212529; border-color: #8BC34A; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #AED581; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #AED581; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #AED581; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FFB74D; border: 1px solid #FFB74D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #FFA726; color: #212529; border-color: #FFA726; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFFDE7; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #FF9800; color: #212529; border-color: #FF9800; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFB74D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #FFB74D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #FFB74D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #BA68C8; color: #121212; border-color: #BA68C8; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #AB47BC; color: #121212; border-color: #AB47BC; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212529; background: #E57373; border: 1px solid #E57373; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #EF5350; color: #212529; border-color: #EF5350; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFEBEE; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #F44336; color: #212529; border-color: #F44336; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #E57373; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #E57373; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #E57373; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #FFE082; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #474747; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #4d4d4d; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #B0BEC5; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - border-color: transparent; - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(176, 190, 197, 0.16); - border-color: transparent; - color: #B0BEC5; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - border-color: transparent; - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 195, 247, 0.16); - border-color: transparent; - color: #4FC3F7; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - border-color: transparent; - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(174, 213, 129, 0.16); - border-color: transparent; - color: #AED581; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - border-color: transparent; - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 183, 77, 0.16); - border-color: transparent; - color: #FFB74D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #E57373; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - color: #E57373; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - color: #E57373; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #E57373; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - border-color: transparent; - color: #E57373; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - border-color: transparent; - color: #E57373; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #323232; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #212529; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #dedede; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #dedede; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #212529; background: #FFE082; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #FFE082; + } + .p-orderlist .p-orderlist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ 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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; @@ -3065,6 +4721,59 @@ background: #4c4c4c; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #252525; color: #dedede; @@ -3186,31 +4936,72 @@ color: #4c4c4c; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #FFE082; + } + .p-picklist .p-picklist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ 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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; @@ -3241,6 +5042,117 @@ background: #4c4c4c; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #dedede; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3650,6 +5852,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #4b4b4b; + border-top: 1px solid #4b4b4b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #4b4b4b; + border-left: 1px solid #4b4b4b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #dedede; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #4b4b4b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #323232; color: #dedede; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3994,12 +6928,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -4010,6 +6944,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4068,6 +7215,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #FFCA28; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4141,6 +7364,7 @@ .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; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #dedede; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4171,7 +7437,7 @@ border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #dedede; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #dedede; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #4b4b4b; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #4b4b4b; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #191919; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #dedede; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .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; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .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; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #212529; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #252525; @@ -4945,6 +8898,16 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFE082; color: #212529; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #FFE082; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #FFE082; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #FFE082; color: #212529; @@ -5619,14 +10566,39 @@ color: #212529; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e32b80d..0e81832 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ 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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #212529; background: #81D4FA; @@ -419,10 +643,6 @@ background: #81d4fa; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #dedede; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #81d4fa; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #4b4b4b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #4b4b4b; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81D4FA; background: #81D4FA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #81D4FA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #29B6F6; - background: #29B6F6; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81D4FA; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #29B6F6; } @@ -806,6 +1324,52 @@ border-color: #212529; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #81d4fa; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #81D4FA; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #323232; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #4FC3F7; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #e57373; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #888888; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #888888; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #3c3c3c; + 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; @@ -1277,11 +2275,118 @@ border-color: #e57373; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #dedede; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #81d4fa; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #81D4FA; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #81D4FA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81D4FA; background: #81D4FA; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #81D4FA; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; - border-color: #81D4FA; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #81D4FA; @@ -1586,6 +2796,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #81D4FA; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #81D4FA; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #81D4FA; border-color: #81D4FA; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #81D4FA; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } + .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; @@ -1696,53 +3016,152 @@ background-color: #4b4b4b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { - background: #81D4FA; - border-color: #81D4FA; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #4FC3F7; - border-color: #4FC3F7; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #81D4FA; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #4FC3F7; color: #212529; border-color: #4FC3F7; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #29B6F6; color: #212529; border-color: #29B6F6; @@ -1767,12 +3187,12 @@ color: #81D4FA; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #888888; border-color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } @@ -1794,12 +3214,12 @@ color: #81D4FA; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #B0BEC5; border: 1px solid #B0BEC5; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #90A4AE; color: #121212; border-color: #90A4AE; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #CFD8DC; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #78909C; color: #121212; border-color: #78909C; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #B0BEC5; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212529; background: #4FC3F7; border: 1px solid #4FC3F7; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #29B6F6; color: #212529; border-color: #29B6F6; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #E1F5FE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #03A9F4; color: #212529; border-color: #03A9F4; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #4FC3F7; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212529; background: #AED581; border: 1px solid #AED581; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #9CCC65; color: #212529; border-color: #9CCC65; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #F1F8E9; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #8BC34A; color: #212529; border-color: #8BC34A; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #AED581; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #AED581; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #AED581; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FFB74D; border: 1px solid #FFB74D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #FFA726; color: #212529; border-color: #FFA726; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFFDE7; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #FF9800; color: #212529; border-color: #FF9800; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFB74D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #FFB74D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #FFB74D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #BA68C8; color: #121212; border-color: #BA68C8; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #AB47BC; color: #121212; border-color: #AB47BC; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212529; background: #E57373; border: 1px solid #E57373; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #EF5350; color: #212529; border-color: #EF5350; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFEBEE; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #F44336; color: #212529; border-color: #F44336; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #E57373; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #E57373; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #E57373; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #81D4FA; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #474747; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #4d4d4d; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #B0BEC5; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - border-color: transparent; - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(176, 190, 197, 0.16); - border-color: transparent; - color: #B0BEC5; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - border-color: transparent; - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 195, 247, 0.16); - border-color: transparent; - color: #4FC3F7; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - border-color: transparent; - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(174, 213, 129, 0.16); - border-color: transparent; - color: #AED581; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - border-color: transparent; - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 183, 77, 0.16); - border-color: transparent; - color: #FFB74D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #E57373; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - color: #E57373; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - color: #E57373; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #E57373; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - border-color: transparent; - color: #E57373; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - border-color: transparent; - color: #E57373; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #323232; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #212529; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #dedede; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #dedede; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #212529; background: #81D4FA; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81D4FA; + } + .p-orderlist .p-orderlist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ 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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; @@ -3065,6 +4721,59 @@ background: #4c4c4c; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #252525; color: #dedede; @@ -3186,31 +4936,72 @@ color: #4c4c4c; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81D4FA; + } + .p-picklist .p-picklist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ 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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; @@ -3241,6 +5042,117 @@ background: #4c4c4c; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #dedede; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3650,6 +5852,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #4b4b4b; + border-top: 1px solid #4b4b4b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #4b4b4b; + border-left: 1px solid #4b4b4b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #dedede; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #4b4b4b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #323232; color: #dedede; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3994,12 +6928,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -4010,6 +6944,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4068,6 +7215,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #29B6F6; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4141,6 +7364,7 @@ .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; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #dedede; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4171,7 +7437,7 @@ border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #dedede; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #dedede; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #4b4b4b; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #4b4b4b; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #191919; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #dedede; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .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; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .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; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #212529; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #252525; @@ -4945,6 +8898,16 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81D4FA; color: #212529; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81D4FA; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #81D4FA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #81D4FA; color: #212529; @@ -5619,14 +10566,39 @@ color: #212529; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index fb8087b..92bd5ef 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ 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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #212529; background: #C5E1A5; @@ -419,10 +643,6 @@ background: #c5e1a5; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #dedede; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #c5e1a5; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #4b4b4b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #4b4b4b; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #C5E1A5; background: #C5E1A5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #C5E1A5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9CCC65; - background: #9CCC65; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #C5E1A5; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9CCC65; } @@ -806,6 +1324,52 @@ border-color: #212529; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #c5e1a5; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #C5E1A5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #323232; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #AED581; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #e57373; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #888888; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #888888; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #3c3c3c; + 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; @@ -1277,11 +2275,118 @@ border-color: #e57373; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #dedede; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #c5e1a5; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #C5E1A5; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #C5E1A5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #C5E1A5; background: #C5E1A5; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #C5E1A5; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; - border-color: #C5E1A5; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #C5E1A5; @@ -1586,6 +2796,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #C5E1A5; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #C5E1A5; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #C5E1A5; border-color: #C5E1A5; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #C5E1A5; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } + .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; @@ -1696,53 +3016,152 @@ background-color: #4b4b4b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { - background: #C5E1A5; - border-color: #C5E1A5; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #AED581; - border-color: #AED581; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #C5E1A5; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #AED581; color: #212529; border-color: #AED581; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #9CCC65; color: #212529; border-color: #9CCC65; @@ -1767,12 +3187,12 @@ color: #C5E1A5; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #888888; border-color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } @@ -1794,12 +3214,12 @@ color: #C5E1A5; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #B0BEC5; border: 1px solid #B0BEC5; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #90A4AE; color: #121212; border-color: #90A4AE; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #CFD8DC; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #78909C; color: #121212; border-color: #78909C; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #B0BEC5; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212529; background: #4FC3F7; border: 1px solid #4FC3F7; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #29B6F6; color: #212529; border-color: #29B6F6; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #E1F5FE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #03A9F4; color: #212529; border-color: #03A9F4; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #4FC3F7; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212529; background: #AED581; border: 1px solid #AED581; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #9CCC65; color: #212529; border-color: #9CCC65; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #F1F8E9; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #8BC34A; color: #212529; border-color: #8BC34A; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #AED581; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #AED581; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #AED581; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FFB74D; border: 1px solid #FFB74D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #FFA726; color: #212529; border-color: #FFA726; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFFDE7; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #FF9800; color: #212529; border-color: #FF9800; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFB74D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #FFB74D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #FFB74D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #BA68C8; color: #121212; border-color: #BA68C8; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #AB47BC; color: #121212; border-color: #AB47BC; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212529; background: #E57373; border: 1px solid #E57373; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #EF5350; color: #212529; border-color: #EF5350; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFEBEE; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #F44336; color: #212529; border-color: #F44336; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #E57373; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #E57373; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #E57373; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #C5E1A5; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #474747; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #4d4d4d; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #B0BEC5; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - border-color: transparent; - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(176, 190, 197, 0.16); - border-color: transparent; - color: #B0BEC5; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - border-color: transparent; - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 195, 247, 0.16); - border-color: transparent; - color: #4FC3F7; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - border-color: transparent; - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(174, 213, 129, 0.16); - border-color: transparent; - color: #AED581; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - border-color: transparent; - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 183, 77, 0.16); - border-color: transparent; - color: #FFB74D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #E57373; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - color: #E57373; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - color: #E57373; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #E57373; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - border-color: transparent; - color: #E57373; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - border-color: transparent; - color: #E57373; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #323232; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #212529; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #dedede; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #dedede; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #212529; background: #C5E1A5; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #C5E1A5; + } + .p-orderlist .p-orderlist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ 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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; @@ -3065,6 +4721,59 @@ background: #4c4c4c; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #252525; color: #dedede; @@ -3186,31 +4936,72 @@ color: #4c4c4c; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #C5E1A5; + } + .p-picklist .p-picklist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ 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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; @@ -3241,6 +5042,117 @@ background: #4c4c4c; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #dedede; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3650,6 +5852,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #4b4b4b; + border-top: 1px solid #4b4b4b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #4b4b4b; + border-left: 1px solid #4b4b4b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #dedede; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #4b4b4b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #323232; color: #dedede; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3994,12 +6928,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -4010,6 +6944,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4068,6 +7215,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #9CCC65; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4141,6 +7364,7 @@ .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; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #dedede; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4171,7 +7437,7 @@ border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #dedede; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #dedede; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #4b4b4b; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #4b4b4b; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #191919; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #dedede; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .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; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .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; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #212529; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #252525; @@ -4945,6 +8898,16 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #C5E1A5; color: #212529; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #C5E1A5; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #C5E1A5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #C5E1A5; color: #212529; @@ -5619,14 +10566,39 @@ color: #212529; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index f7ed0b2..6efad96 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ 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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #212529; background: #F48FB1; @@ -419,10 +643,6 @@ background: #f48fb1; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #212529; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #dedede; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #f48fb1; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #4b4b4b; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #4b4b4b; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #F48FB1; background: #F48FB1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #F48FB1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #EC407A; - background: #EC407A; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #F48FB1; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #EC407A; } @@ -806,6 +1324,52 @@ border-color: #212529; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #e57373; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #f48fb1; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #F48FB1; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #323232; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #F06292; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #e57373; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #888888; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #888888; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; - background: #3c3c3c; + 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; @@ -1277,11 +2275,118 @@ border-color: #e57373; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #dedede; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #f48fb1; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #dedede; - background: #3c3c3c; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #F48FB1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #F48FB1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #F48FB1; background: #F48FB1; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #F48FB1; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; - border-color: #F48FB1; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #F48FB1; @@ -1586,6 +2796,44 @@ border-color: #e57373; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #F48FB1; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } .p-slider .p-slider-range { background: #F48FB1; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #F48FB1; border-color: #F48FB1; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #F48FB1; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } + .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; @@ -1696,53 +3016,152 @@ background-color: #4b4b4b; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { - background: #F48FB1; - border-color: #F48FB1; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #F06292; - border-color: #F06292; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #F48FB1; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #F06292; color: #212529; border-color: #F06292; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #EC407A; color: #212529; border-color: #EC407A; @@ -1767,12 +3187,12 @@ color: #F48FB1; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #888888; border-color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } @@ -1794,12 +3214,12 @@ color: #F48FB1; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #4c4c4c; color: #888888; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #3c3c3c; color: #888888; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #B0BEC5; border: 1px solid #B0BEC5; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #90A4AE; color: #121212; border-color: #90A4AE; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #CFD8DC; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #78909C; color: #121212; border-color: #78909C; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); color: #B0BEC5; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #B0BEC5; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #B0BEC5; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212529; background: #4FC3F7; border: 1px solid #4FC3F7; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #29B6F6; color: #212529; border-color: #29B6F6; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #E1F5FE; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #03A9F4; color: #212529; border-color: #03A9F4; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); color: #4FC3F7; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #4FC3F7; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4FC3F7; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212529; background: #AED581; border: 1px solid #AED581; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #9CCC65; color: #212529; border-color: #9CCC65; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #F1F8E9; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #8BC34A; color: #212529; border-color: #8BC34A; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); color: #AED581; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #AED581; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #AED581; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #AED581; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FFB74D; border: 1px solid #FFB74D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #FFA726; color: #212529; border-color: #FFA726; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFFDE7; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #FF9800; color: #212529; border-color: #FF9800; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); color: #FFB74D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFB74D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #FFB74D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #FFB74D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #BA68C8; color: #121212; border-color: #BA68C8; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #AB47BC; color: #121212; border-color: #AB47BC; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212529; background: #E57373; border: 1px solid #E57373; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #EF5350; color: #212529; border-color: #EF5350; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.1rem #FFEBEE; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #F44336; color: #212529; border-color: #F44336; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); color: #E57373; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #E57373; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #E57373; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #E57373; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #F48FB1; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #474747; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #4d4d4d; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #4c4c4c; - color: #888888; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #B0BEC5; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(176, 190, 197, 0.04); - border-color: transparent; - color: #B0BEC5; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(176, 190, 197, 0.16); - border-color: transparent; - color: #B0BEC5; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 195, 247, 0.04); - border-color: transparent; - color: #4FC3F7; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 195, 247, 0.16); - border-color: transparent; - color: #4FC3F7; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(174, 213, 129, 0.04); - border-color: transparent; - color: #AED581; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(174, 213, 129, 0.16); - border-color: transparent; - color: #AED581; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 183, 77, 0.04); - border-color: transparent; - color: #FFB74D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 183, 77, 0.16); - border-color: transparent; - color: #FFB74D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #E57373; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - color: #E57373; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - color: #E57373; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #E57373; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(229, 115, 115, 0.04); - border-color: transparent; - color: #E57373; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(229, 115, 115, 0.16); - border-color: transparent; - color: #E57373; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #212529; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #323232; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #212529; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #dedede; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #dedede; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #212529; background: #F48FB1; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #F48FB1; + } + .p-orderlist .p-orderlist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ 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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; @@ -3065,6 +4721,59 @@ background: #4c4c4c; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.1rem white; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #252525; color: #dedede; @@ -3186,31 +4936,72 @@ color: #4c4c4c; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #323232; border: 1px solid #191919; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #F48FB1; + } + .p-picklist .p-picklist-header { + color: #dedede; 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-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:not(:first-child) { + border-top: 1px solid #191919; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ 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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; @@ -3241,6 +5042,117 @@ background: #4c4c4c; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #dedede; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -3650,6 +5852,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #323232; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #4b4b4b; + border-top: 1px solid #4b4b4b; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #4b4b4b; + border-left: 1px solid #4b4b4b; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #dedede; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.1rem white; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #4b4b4b; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #323232; color: #dedede; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #323232; color: #dedede; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #323232; color: #dedede; @@ -3994,12 +6928,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(50, 50, 50, 0); border-bottom-color: #323232; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(25, 25, 25, 0); border-bottom-color: #181818; } @@ -4010,6 +6944,159 @@ border-top-color: #191919; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #323232; color: #dedede; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4068,6 +7215,50 @@ border-bottom-color: #4c4c4c; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #EC407A; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4141,6 +7364,7 @@ .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; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #dedede; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #252525; @@ -4171,7 +7437,7 @@ border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #252525; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #dedede; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #dedede; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #dedede; + background: #4c4c4c; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #4b4b4b; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #dedede; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #4b4b4b; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #191919; border-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #dedede; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .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; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .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; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #212529; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #252525; color: #dedede; border: 1px solid #191919; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #252525; @@ -4945,6 +8898,16 @@ background: #252525; border: 1px solid #191919; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #dedede; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #dedede; - background: #3c3c3c; + background: #4c4c4c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #dedede; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #dedede; + background: #4c4c4c; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #dedede; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #323232; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #F48FB1; color: #212529; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #4c4c4c; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.1rem white; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #F48FB1; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #F48FB1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #F48FB1; color: #212529; @@ -5619,14 +10566,39 @@ color: #212529; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #323232; color: #dedede; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 38d1082..76e9128 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -1,16 +1,17 @@ :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%,.04); - --surface-d:hsla(0,0%,100%,.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; + --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; @@ -32,15 +33,15 @@ --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%,.12); - --surface-hover:hsla(0,0%,100%,.04); + --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); @@ -295,6 +296,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +458,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 1rem; } @@ -387,6 +605,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -435,6 +654,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); @@ -443,10 +668,6 @@ background: rgba(206, 147, 216, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -458,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -502,6 +873,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +924,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #CE93D8; @@ -590,6 +963,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -651,6 +1025,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -659,6 +1040,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -667,6 +1051,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -676,16 +1063,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { 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; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -696,6 +1169,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -737,6 +1219,12 @@ 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); @@ -745,10 +1233,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -759,20 +1243,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -781,6 +1287,7 @@ 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; @@ -791,41 +1298,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: rgba(255, 255, 255, 0.08); } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1402,7 @@ } .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; @@ -867,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1459,107 @@ 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 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; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -900,6 +1570,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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; } @@ -965,6 +1647,12 @@ 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); @@ -973,13 +1661,14 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } + .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; @@ -993,17 +1682,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 3rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1845,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: 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: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1098,30 +2031,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #CE93D8; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2068,7 @@ 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); @@ -1146,6 +2082,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1165,27 +2110,15 @@ color: #f44435; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 1rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 3rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 3rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 1rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 3rem; } @@ -1225,12 +2158,68 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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 rgba(255, 255, 255, 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; @@ -1260,6 +2249,12 @@ 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); @@ -1281,12 +2276,16 @@ } .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.12); + 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; @@ -1297,11 +2296,118 @@ border-color: #f44435; } + .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 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; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1312,6 +2418,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1379,6 +2494,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -1402,6 +2518,12 @@ 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); @@ -1410,10 +2532,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } @@ -1433,14 +2551,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .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-invalid.p-component > .p-inputtext { @@ -1460,19 +2595,64 @@ background: rgba(206, 147, 216, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { - background: #EF9A9A; + background: #ef9a9a; } .p-password-panel .p-password-meter .p-password-strength.medium { - background: #FFF59D; + background: #fff59d; } .p-password-panel .p-password-meter .p-password-strength.strong { - background: #C5E1A5; + 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 rgba(255, 255, 255, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -1481,15 +2661,7 @@ 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); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2669,78 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #CE93D8; + } + .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:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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); @@ -1545,7 +2757,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #CE93D8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #CE93D8; @@ -1598,6 +2809,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1624,25 +2873,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #CE93D8; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #CE93D8; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1653,6 +2965,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-treeselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1708,53 +3029,152 @@ background-color: rgba(255, 255, 255, 0.1); } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #121212; background: #CE93D8; @@ -1763,13 +3183,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #121212; border-color: transparent; @@ -1779,12 +3200,12 @@ color: #CE93D8; border: 0px none; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 0px none; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 0px none; @@ -1793,11 +3214,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3227,12 @@ color: #CE93D8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-color: transparent; @@ -1819,15 +3240,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,305 +3321,354 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #A5D6A7; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212121; - background: #90CAF9; + background: #90caf9; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212121; - background: #C5E1A5; + background: #c5e1a5; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212121; - background: #FFF59D; + background: #fff59d; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #212121; - background: #CE93D8; + background: #ce93d8; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212121; - background: #EF9A9A; + background: #ef9a9a; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); border-color: transparent; - color: #EF9A9A; + color: #ef9a9a; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); border-color: transparent; - color: #EF9A9A; + 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: 0px 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: 0px 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: 0px 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 { @@ -2206,25 +3676,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #CE93D8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3799,8 @@ height: 3rem; background: #A5D6A7; color: #212121; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(165, 214, 167, 0.92); @@ -2304,263 +3853,120 @@ border-radius: 4px; } + .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; + } + .p-splitbutton { border-radius: 4px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #A5D6A7; - border: 0px none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 214, 167, 0.04); - color: #A5D6A7; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 214, 167, 0.04); - border-color: transparent; - color: #A5D6A7; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(165, 214, 167, 0.16); - border-color: transparent; - color: #A5D6A7; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #90CAF9; - border: 0px none; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - border-color: transparent; - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(144, 202, 249, 0.16); - border-color: transparent; - color: #90CAF9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #C5E1A5; - border: 0px none; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FFF59D; - border: 0px none; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - border-color: transparent; - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 245, 157, 0.16); - border-color: transparent; - color: #FFF59D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF9A9A; - border: 0px none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF9A9A; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - border-color: transparent; - color: #EF9A9A; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - border-color: transparent; - color: #EF9A9A; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3978,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4015,241 @@ color: #CE93D8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4353,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4385,10 @@ 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); } @@ -2821,17 +4468,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #222222; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #CE93D8; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4534,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2915,6 +4558,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2943,6 +4587,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2975,6 +4620,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4673,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3055,13 +4751,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3077,6 +4783,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4868,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4876,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3198,31 +4998,72 @@ color: rgba(255, 255, 255, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3231,13 +5072,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3253,6 +5104,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5240,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3308,6 +5352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3326,7 +5371,7 @@ .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 { + .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 { @@ -3367,6 +5412,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5673,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5689,7 @@ .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 { + .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 { @@ -3564,6 +5779,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3572,6 +5804,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5897,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3687,6 +5939,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5961,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3716,7 +6025,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6035,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -3751,6 +6080,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3786,10 +6116,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3810,6 +6257,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6268,244 @@ background: rgba(255, 255, 255, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6526,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6549,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6565,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3888,6 +6596,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3910,12 +6688,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -3936,6 +6714,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6876,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6906,12 @@ background: #262626; color: rgba(255, 255, 255, 0.87); padding: 1rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6919,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4031,12 +7015,12 @@ color: #121212; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -4047,6 +7031,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4056,6 +7193,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; @@ -4065,6 +7206,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7227,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4105,6 +7302,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4169,6 +7410,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4178,6 +7451,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7475,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4208,7 +7524,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7536,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4255,7 +7580,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4263,6 +7588,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4285,6 +7620,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7774,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #1e1e1e; @@ -4364,6 +7964,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4399,7 +8008,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4407,6 +8016,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4422,6 +8041,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8054,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { - width: 12.5rem; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8094,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(255, 255, 255, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8171,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4518,7 +8217,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4526,6 +8225,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4555,6 +8264,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4595,6 +8410,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4630,7 +8454,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4638,6 +8462,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4653,7 +8487,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); @@ -4662,95 +8497,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 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-menuitem-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 9rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 11rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .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; + outline-color: transparent; } + .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 rgba(255, 255, 255, 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 11rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8599,7 @@ background: #1e1e1e; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4809,6 +8649,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4844,7 +8693,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4852,6 +8701,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4900,11 +8759,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4945,6 +8858,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -4965,6 +8918,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8939,62 @@ color: #CE93D8; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2b2b2b; @@ -5006,6 +9009,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5042,7 +9055,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5050,6 +9063,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -5072,31 +9095,51 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; border-radius: 4px; } .p-inline-message.p-inline-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 1px; - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-info .p-inline-message-icon { - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 1px; - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-success .p-inline-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 1px; color: #7f6003; @@ -5105,13 +9148,31 @@ color: #7f6003; } .p-inline-message.p-inline-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 1px; - color: #B71C1C; + color: #b71c1c; } .p-inline-message.p-inline-message-error .p-inline-message-icon { - color: #B71C1C; + color: #b71c1c; + } + .p-inline-message.p-inline-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #121212; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #121212; } .p-inline-message .p-inline-message-icon { font-size: 1rem; @@ -5124,6 +9185,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5137,6 +9247,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5147,31 +9258,31 @@ box-shadow: none; } .p-message.p-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-icon { - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-close { - color: #01579B; + color: #01579b; } .p-message.p-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-close { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5183,16 +9294,40 @@ color: #7f6003; } .p-message.p-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-icon { - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-close { - color: #B71C1C; + color: #b71c1c; + } + .p-message.p-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-secondary .p-message-icon { + color: #121212; + } + .p-message.p-message-secondary .p-message-close { + color: #121212; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-contrast .p-message-icon { + color: #121212; + } + .p-message.p-message-contrast .p-message-close { + color: #121212; } .p-message .p-message-text { font-size: 1rem; @@ -5207,6 +9342,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9449,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5251,27 +9460,27 @@ box-shadow: none; } .p-toast .p-toast-message.p-toast-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + 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; + color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + 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; + color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5281,14 +9490,318 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + 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; + color: #b71c1c; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #121212; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; } .p-galleria .p-galleria-close { @@ -5392,6 +9905,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9918,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10038,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5473,6 +10102,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #CE93D8; color: #121212; @@ -5487,21 +10149,29 @@ color: #121212; } .p-badge.p-badge-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-badge.p-badge-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-badge.p-badge-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-badge.p-badge-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-badge.p-badge-secondary { + background-color: #A5D6A7; + color: #121212; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #121212; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10185,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5539,6 +10247,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10258,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5564,6 +10292,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10512,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5587,7 +10545,7 @@ .p-progress-spinner-circle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; - stroke: #B71C1C; + stroke: #b71c1c; animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; stroke-linecap: round; } @@ -5613,18 +10571,79 @@ } @keyframes p-progress-spinner-color { 100%, 0% { - stroke: #B71C1C; + stroke: #b71c1c; } 40% { - stroke: #01579B; + stroke: #01579b; } 66% { - stroke: #1B5E20; + stroke: #1b5e20; } 80%, 90% { stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5647,6 +10666,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5655,6 +10706,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #CE93D8; color: #121212; @@ -5664,30 +10731,63 @@ border-radius: 4px; } .p-tag.p-tag-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-tag.p-tag-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-tag.p-tag-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-tag.p-tag-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-tag.p-tag-secondary { + background-color: #A5D6A7; + color: #121212; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #121212; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5743,8 +10843,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10853,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:hover { background-color: rgba(255, 255, 255, 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)); + 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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:focus { box-shadow: none; background-color: rgba(255, 255, 255, 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container { + 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, #CE93D8, #CE93D8), 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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10998,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(165, 214, 167, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(165, 214, 167, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(165, 214, 167, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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 rgba(255, 255, 255, 0.3); background: #1e1e1e; @@ -6061,6 +11309,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #f44435; } @@ -6071,72 +11331,13 @@ 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: rgba(255, 255, 255, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), 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; - } - .p-input-filled .p-calendar-w-btn .p-inputtext { - background-image: none; - background: transparent; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11347,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11357,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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; } - .p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(206, 147, 216, 0.16); + } + .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; } @@ -6213,21 +11407,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11426,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: rgba(255, 255, 255, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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: rgba(255, 255, 255, 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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @@ -6280,8 +11483,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11493,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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; } - .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:focus { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11569,8 @@ box-shadow: inset 0 -2px 0 0 #CE93D8; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11580,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11590,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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; } - .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .p-input-filled .p-dropdown .p-inputtext:enabled:focus { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(206, 147, 216, 0.16); + } + .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; } @@ -6517,6 +11718,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11748,53 @@ 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):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: rgba(255, 255, 255, 0.1); + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11871,12 @@ background: rgba(255, 255, 255, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11886,50 @@ .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.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled: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; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); @@ -6648,75 +11944,12 @@ 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: rgba(255, 255, 255, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), 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; - } - .p-input-filled .p-multiselect .p-inputtext { - background-image: none; - background: transparent; - } - .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, #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: rgba(255, 255, 255, 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; } @@ -6742,19 +11975,6 @@ 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; } @@ -6854,32 +12074,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid rgba(255, 255, 255, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 rgba(255, 255, 255, 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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } @@ -6900,7 +12126,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(165, 214, 167, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12222,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12346,8 @@ background: rgba(206, 147, 216, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12357,50 @@ .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.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled: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; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(206, 147, 216, 0.16); @@ -7227,11 +12517,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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.p-button:not(.p-disabled).p-focus.p-highlight { + .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); } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 3b2e94f..72b9c7d 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -1,16 +1,17 @@ :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%,.04); - --surface-d:hsla(0,0%,100%,.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; + --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; @@ -32,15 +33,15 @@ --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%,.12); - --surface-hover:hsla(0,0%,100%,.04); + --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); @@ -295,6 +296,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +458,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 1rem; } @@ -387,6 +605,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -435,6 +654,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); @@ -443,10 +668,6 @@ background: rgba(159, 168, 218, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -458,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -502,6 +873,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +924,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #9FA8DA; @@ -590,6 +963,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -651,6 +1025,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -659,6 +1040,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -667,6 +1051,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -676,16 +1063,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { 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; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -696,6 +1169,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -737,6 +1219,12 @@ 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); @@ -745,10 +1233,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -759,20 +1243,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -781,6 +1287,7 @@ 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; @@ -791,41 +1298,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: rgba(255, 255, 255, 0.08); } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1402,7 @@ } .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; @@ -867,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1459,107 @@ 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 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; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -900,6 +1570,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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; } @@ -965,6 +1647,12 @@ 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); @@ -973,13 +1661,14 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } + .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; @@ -993,17 +1682,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 3rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1845,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: 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: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1098,30 +2031,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #9FA8DA; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2068,7 @@ 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); @@ -1146,6 +2082,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1165,27 +2110,15 @@ color: #f44435; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 1rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 3rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 3rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 1rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 3rem; } @@ -1225,12 +2158,68 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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 rgba(255, 255, 255, 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; @@ -1260,6 +2249,12 @@ 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); @@ -1281,12 +2276,16 @@ } .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.12); + 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; @@ -1297,11 +2296,118 @@ border-color: #f44435; } + .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 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; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1312,6 +2418,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1379,6 +2494,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -1402,6 +2518,12 @@ 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); @@ -1410,10 +2532,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } @@ -1433,14 +2551,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .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-invalid.p-component > .p-inputtext { @@ -1460,19 +2595,64 @@ background: rgba(159, 168, 218, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { - background: #EF9A9A; + background: #ef9a9a; } .p-password-panel .p-password-meter .p-password-strength.medium { - background: #FFF59D; + background: #fff59d; } .p-password-panel .p-password-meter .p-password-strength.strong { - background: #C5E1A5; + 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 rgba(255, 255, 255, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -1481,15 +2661,7 @@ 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); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2669,78 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #9FA8DA; + } + .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:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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); @@ -1545,7 +2757,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #9FA8DA; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #9FA8DA; @@ -1598,6 +2809,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1624,25 +2873,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #9FA8DA; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #9FA8DA; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1653,6 +2965,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-treeselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1708,53 +3029,152 @@ background-color: rgba(255, 255, 255, 0.1); } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #121212; background: #9FA8DA; @@ -1763,13 +3183,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(159, 168, 218, 0.68); color: #121212; border-color: transparent; @@ -1779,12 +3200,12 @@ color: #9FA8DA; border: 0px none; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 168, 218, 0.04); color: #9FA8DA; border: 0px none; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border: 0px none; @@ -1793,11 +3214,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3227,12 @@ color: #9FA8DA; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-color: transparent; @@ -1819,15 +3240,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,305 +3321,354 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212121; - background: #90CAF9; + background: #90caf9; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212121; - background: #C5E1A5; + background: #c5e1a5; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212121; - background: #FFF59D; + background: #fff59d; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #212121; - background: #CE93D8; + background: #ce93d8; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212121; - background: #EF9A9A; + background: #ef9a9a; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); border-color: transparent; - color: #EF9A9A; + color: #ef9a9a; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); border-color: transparent; - color: #EF9A9A; + 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: 0px 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: 0px 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: 0px 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 { @@ -2206,25 +3676,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #9FA8DA; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #9FA8DA; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3799,8 @@ height: 3rem; background: #F48FB1; color: #212121; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(244, 143, 177, 0.92); @@ -2304,263 +3853,120 @@ border-radius: 4px; } + .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; + } + .p-splitbutton { border-radius: 4px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #9FA8DA; - border: 0px none; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 168, 218, 0.04); - color: #9FA8DA; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 168, 218, 0.04); - color: #9FA8DA; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 0px none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #90CAF9; - border: 0px none; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - border-color: transparent; - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(144, 202, 249, 0.16); - border-color: transparent; - color: #90CAF9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #C5E1A5; - border: 0px none; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FFF59D; - border: 0px none; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - border-color: transparent; - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 245, 157, 0.16); - border-color: transparent; - color: #FFF59D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF9A9A; - border: 0px none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF9A9A; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - border-color: transparent; - color: #EF9A9A; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - border-color: transparent; - color: #EF9A9A; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3978,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4015,241 @@ color: #9FA8DA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4353,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4385,10 @@ 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); } @@ -2821,17 +4468,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #222222; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #9FA8DA; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4534,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2915,6 +4558,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2943,6 +4587,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2975,6 +4620,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4673,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3055,13 +4751,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3077,6 +4783,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4868,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4876,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3198,31 +4998,72 @@ color: rgba(255, 255, 255, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3231,13 +5072,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3253,6 +5104,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5240,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3308,6 +5352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3326,7 +5371,7 @@ .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 { + .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 { @@ -3367,6 +5412,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5673,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5689,7 @@ .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 { + .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 { @@ -3564,6 +5779,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3572,6 +5804,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5897,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3687,6 +5939,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5961,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3716,7 +6025,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6035,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -3751,6 +6080,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3786,10 +6116,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3810,6 +6257,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6268,244 @@ background: rgba(255, 255, 255, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6526,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6549,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6565,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3888,6 +6596,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3910,12 +6688,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -3936,6 +6714,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6876,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6906,12 @@ background: #262626; color: rgba(255, 255, 255, 0.87); padding: 1rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6919,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4031,12 +7015,12 @@ color: #121212; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -4047,6 +7031,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4056,6 +7193,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; @@ -4065,6 +7206,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7227,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4105,6 +7302,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4169,6 +7410,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4178,6 +7451,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7475,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4208,7 +7524,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7536,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4255,7 +7580,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4263,6 +7588,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4285,6 +7620,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7774,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #1e1e1e; @@ -4364,6 +7964,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4399,7 +8008,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4407,6 +8016,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4422,6 +8041,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8054,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { - width: 12.5rem; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8094,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(255, 255, 255, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8171,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4518,7 +8217,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4526,6 +8225,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4555,6 +8264,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4595,6 +8410,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4630,7 +8454,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4638,6 +8462,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4653,7 +8487,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); @@ -4662,95 +8497,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 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-menuitem-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 9rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 11rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .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; + outline-color: transparent; } + .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 rgba(255, 255, 255, 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 11rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8599,7 @@ background: #1e1e1e; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4809,6 +8649,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4844,7 +8693,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4852,6 +8701,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4900,11 +8759,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4945,6 +8858,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -4965,6 +8918,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8939,62 @@ color: #9FA8DA; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2b2b2b; @@ -5006,6 +9009,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5042,7 +9055,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5050,6 +9063,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -5072,31 +9095,51 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; border-radius: 4px; } .p-inline-message.p-inline-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 1px; - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-info .p-inline-message-icon { - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 1px; - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-success .p-inline-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 1px; color: #7f6003; @@ -5105,13 +9148,31 @@ color: #7f6003; } .p-inline-message.p-inline-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 1px; - color: #B71C1C; + color: #b71c1c; } .p-inline-message.p-inline-message-error .p-inline-message-icon { - color: #B71C1C; + color: #b71c1c; + } + .p-inline-message.p-inline-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #121212; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #121212; } .p-inline-message .p-inline-message-icon { font-size: 1rem; @@ -5124,6 +9185,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5137,6 +9247,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5147,31 +9258,31 @@ box-shadow: none; } .p-message.p-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-icon { - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-close { - color: #01579B; + color: #01579b; } .p-message.p-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-close { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5183,16 +9294,40 @@ color: #7f6003; } .p-message.p-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-icon { - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-close { - color: #B71C1C; + color: #b71c1c; + } + .p-message.p-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-secondary .p-message-icon { + color: #121212; + } + .p-message.p-message-secondary .p-message-close { + color: #121212; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-contrast .p-message-icon { + color: #121212; + } + .p-message.p-message-contrast .p-message-close { + color: #121212; } .p-message .p-message-text { font-size: 1rem; @@ -5207,6 +9342,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9449,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5251,27 +9460,27 @@ box-shadow: none; } .p-toast .p-toast-message.p-toast-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + 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; + color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + 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; + color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5281,14 +9490,318 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + 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; + color: #b71c1c; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #121212; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; } .p-galleria .p-galleria-close { @@ -5392,6 +9905,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9918,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10038,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5473,6 +10102,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9FA8DA; color: #121212; @@ -5487,21 +10149,29 @@ color: #121212; } .p-badge.p-badge-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-badge.p-badge-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-badge.p-badge-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-badge.p-badge-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-badge.p-badge-secondary { + background-color: #F48FB1; + color: #121212; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #121212; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10185,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5539,6 +10247,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10258,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5564,6 +10292,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10512,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5587,7 +10545,7 @@ .p-progress-spinner-circle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; - stroke: #B71C1C; + stroke: #b71c1c; animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; stroke-linecap: round; } @@ -5613,18 +10571,79 @@ } @keyframes p-progress-spinner-color { 100%, 0% { - stroke: #B71C1C; + stroke: #b71c1c; } 40% { - stroke: #01579B; + stroke: #01579b; } 66% { - stroke: #1B5E20; + stroke: #1b5e20; } 80%, 90% { stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5647,6 +10666,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5655,6 +10706,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #9FA8DA; color: #121212; @@ -5664,30 +10731,63 @@ border-radius: 4px; } .p-tag.p-tag-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-tag.p-tag-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-tag.p-tag-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-tag.p-tag-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-tag.p-tag-secondary { + background-color: #F48FB1; + color: #121212; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #121212; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5743,8 +10843,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10853,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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.87), rgba(255, 255, 255, 0.87)); + 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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:focus { box-shadow: none; background-color: rgba(255, 255, 255, 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container { + 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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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)); + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10998,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(244, 143, 177, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(244, 143, 177, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(244, 143, 177, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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 rgba(255, 255, 255, 0.3); background: #1e1e1e; @@ -6061,6 +11309,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #f44435; } @@ -6071,72 +11331,13 @@ 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: 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; - } - .p-input-filled .p-calendar-w-btn .p-inputtext { - background-image: none; - background: transparent; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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)); - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11347,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11357,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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)); } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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; } - .p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(159, 168, 218, 0.16); + } + .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; } @@ -6213,21 +11407,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11426,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: rgba(255, 255, 255, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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: rgba(255, 255, 255, 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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @@ -6280,8 +11483,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11493,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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)); } - .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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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; } - .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:focus { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11569,8 @@ box-shadow: inset 0 -2px 0 0 #9FA8DA; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11580,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11590,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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)); } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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; } - .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .p-input-filled .p-dropdown .p-inputtext:enabled:focus { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(159, 168, 218, 0.16); + } + .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; } @@ -6517,6 +11718,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11748,53 @@ 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):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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; + } + .p-inputtext.p-variant-filled: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)); + } + .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: rgba(255, 255, 255, 0.1); + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11871,12 @@ background: rgba(255, 255, 255, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11886,50 @@ .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.p-variant-filled { + 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; + } + .p-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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)); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled: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; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); @@ -6648,75 +11944,12 @@ 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: 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; - } - .p-input-filled .p-multiselect .p-inputtext { - background-image: none; - background: transparent; - } - .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)); - } - .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: rgba(255, 255, 255, 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; } @@ -6742,19 +11975,6 @@ 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; } @@ -6854,32 +12074,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid rgba(255, 255, 255, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 rgba(255, 255, 255, 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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } @@ -6900,7 +12126,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(244, 143, 177, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12222,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12346,8 @@ background: rgba(159, 168, 218, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12357,50 @@ .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.p-variant-filled { + 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; + } + .p-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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)); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled: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; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(159, 168, 218, 0.16); @@ -7227,11 +12517,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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.p-button:not(.p-disabled).p-focus.p-highlight { + .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); } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index db7b652..7dbf720 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +457,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 1rem; } @@ -387,6 +604,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -435,6 +653,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); @@ -443,10 +667,6 @@ background: rgba(103, 58, 183, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -458,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -502,6 +872,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +923,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #673AB7; @@ -590,6 +962,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -651,6 +1024,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); } @@ -659,6 +1039,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -667,6 +1050,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -676,16 +1062,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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); @@ -696,6 +1168,15 @@ 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; @@ -737,6 +1218,12 @@ 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); @@ -745,10 +1232,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -759,20 +1242,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f5f5f5; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -781,6 +1286,7 @@ 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; @@ -791,41 +1297,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1401,7 @@ } .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; @@ -867,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1458,107 @@ 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); @@ -900,6 +1569,18 @@ 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; } @@ -965,6 +1646,12 @@ 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); @@ -973,13 +1660,14 @@ 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.12); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .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; @@ -993,17 +1681,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 3rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1844,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1098,30 +2030,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(0, 0, 0, 0.38); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2067,7 @@ 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); @@ -1146,6 +2081,15 @@ .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; @@ -1165,27 +2109,15 @@ color: #B00020; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 1rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 3rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 3rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 1rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 3rem; } @@ -1225,12 +2157,68 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1260,6 +2248,12 @@ 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); @@ -1281,12 +2275,16 @@ } .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.12); + 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; @@ -1297,11 +2295,118 @@ border-color: #B00020; } + .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); @@ -1312,6 +2417,15 @@ 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); @@ -1379,6 +2493,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -1402,6 +2517,12 @@ 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); @@ -1410,10 +2531,6 @@ 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.12); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -1433,14 +2550,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .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-invalid.p-component > .p-inputtext { @@ -1469,10 +2603,55 @@ 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; @@ -1481,15 +2660,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2668,78 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #673AB7; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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); @@ -1545,7 +2756,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #673AB7; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #673AB7; @@ -1598,6 +2808,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1624,25 +2872,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #673AB7; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #673AB7; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1653,6 +2964,15 @@ box-shadow: none; border-color: #673AB7; } + .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); @@ -1708,53 +3028,152 @@ background-color: #dcdcdc; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #B00020; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #673AB7; @@ -1763,13 +3182,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; @@ -1779,12 +3199,12 @@ color: #673AB7; border: 0 none; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(103, 58, 183, 0.16); color: #673AB7; border: 0 none; @@ -1793,11 +3213,11 @@ color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3226,12 @@ color: #673AB7; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(103, 58, 183, 0.16); color: #673AB7; border-color: transparent; @@ -1819,15 +3239,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,331 +3320,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #4CAF50; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196F3; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #2196F3; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196F3; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196F3; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #673AB7; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #673AB7; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3798,8 @@ height: 3rem; background: #4CAF50; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(76, 175, 80, 0.92); @@ -2304,263 +3852,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(103, 58, 183, 0.04); - color: #673AB7; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(103, 58, 183, 0.04); - color: #673AB7; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #4CAF50; - border: 0 none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - color: #4CAF50; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - border-color: transparent; - color: #4CAF50; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(76, 175, 80, 0.16); - border-color: transparent; - color: #4CAF50; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - border-color: transparent; - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(33, 150, 243, 0.16); - border-color: transparent; - color: #2196F3; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 0 none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3977,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4014,241 @@ color: #673AB7; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4384,10 @@ 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); } @@ -2821,17 +4467,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #673AB7; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4533,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -2915,6 +4557,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2943,6 +4586,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2975,6 +4619,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4672,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3055,13 +4750,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; @@ -3077,6 +4782,59 @@ background: rgba(0, 0, 0, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4867,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4875,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3198,31 +4997,72 @@ color: rgba(0, 0, 0, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3231,13 +5071,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; @@ -3253,6 +5103,117 @@ background: rgba(0, 0, 0, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5239,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3308,6 +5351,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3326,7 +5370,7 @@ .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 { + .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 { @@ -3367,6 +5411,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5672,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5688,7 @@ .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 { + .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 { @@ -3564,6 +5778,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3572,6 +5803,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5896,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3687,6 +5938,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5960,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3716,7 +6024,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(0, 0, 0, 0.12); + border-top: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6034,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(0, 0, 0, 0.12); + border-left: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -3751,6 +6079,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3786,10 +6115,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3810,6 +6256,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6267,244 @@ background: rgba(0, 0, 0, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6525,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6548,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6564,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3888,6 +6595,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3910,12 +6687,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3936,6 +6713,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6875,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6905,12 @@ background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 1rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6918,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4031,12 +7014,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4047,6 +7030,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4056,6 +7192,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; @@ -4065,6 +7205,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7226,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4105,6 +7301,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4169,6 +7409,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4178,6 +7450,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7474,48 @@ color: rgba(0, 0, 0, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4208,7 +7523,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7535,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4255,7 +7579,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4263,6 +7587,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4285,6 +7619,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7773,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: transparent; @@ -4364,6 +7963,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4399,7 +8007,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4407,6 +8015,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4422,6 +8040,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8053,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8093,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8170,16 @@ color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -4518,7 +8216,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4526,6 +8224,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4555,6 +8263,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: transparent; @@ -4595,6 +8409,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4630,7 +8453,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4638,6 +8461,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4653,7 +8486,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(0, 0, 0, 0.12); @@ -4662,95 +8496,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 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-menuitem-separator { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 9rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 11rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 11rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8598,7 @@ background: #ffffff; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(0, 0, 0, 0.87); @@ -4809,6 +8648,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4844,7 +8692,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(0, 0, 0, 0.87); @@ -4852,6 +8700,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4900,11 +8758,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); @@ -4945,6 +8857,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -4965,6 +8917,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8938,62 @@ color: #673AB7; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -5006,6 +9008,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -5042,7 +9054,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -5050,6 +9062,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -5072,6 +9094,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5113,6 +9155,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #B71C1C; } + .p-inline-message.p-inline-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #212121; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5124,6 +9184,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5137,6 +9246,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,6 +9304,30 @@ .p-message.p-message-error .p-message-close { color: #B71C1C; } + .p-message.p-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5207,6 +9341,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9448,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5290,6 +9498,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #B71C1C; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5392,6 +9904,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9917,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10037,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5473,6 +10101,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #673AB7; color: #ffffff; @@ -5502,6 +10163,14 @@ background-color: #D32F2F; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #4CAF50; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #212121; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10184,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5539,6 +10246,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10257,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -5564,6 +10291,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10511,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5625,6 +10582,67 @@ stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5647,6 +10665,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5655,6 +10705,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #673AB7; color: #ffffff; @@ -5679,15 +10745,48 @@ background-color: #D32F2F; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #4CAF50; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #212121; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5743,8 +10842,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10852,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled: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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10997,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(76, 175, 80, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(76, 175, 80, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(76, 175, 80, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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; @@ -6061,6 +11308,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #B00020; } @@ -6071,72 +11330,13 @@ 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-calendar-disabled):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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11346,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11356,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(103, 58, 183, 0.16); + } + .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; } @@ -6213,21 +11406,15 @@ 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-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11425,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @@ -6280,8 +11482,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11492,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11568,8 @@ box-shadow: inset 0 -2px 0 0 #673AB7; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11579,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11589,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(103, 58, 183, 0.16); + } + .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; } @@ -6517,6 +11717,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11747,53 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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-inputtext.p-variant-filled: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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11870,12 @@ background: rgba(0, 0, 0, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11885,50 @@ .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.p-variant-filled { + 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-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); @@ -6648,75 +11943,12 @@ 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; } @@ -6742,19 +11974,6 @@ 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; } @@ -6854,32 +12073,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } @@ -6900,7 +12125,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12221,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12345,8 @@ background: rgba(103, 58, 183, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12356,50 @@ .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.p-variant-filled { + 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-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(103, 58, 183, 0.16); @@ -7227,11 +12516,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index bb99ba3..b398b44 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +457,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 1rem; } @@ -387,6 +604,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.5rem 1rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -435,6 +653,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); @@ -443,10 +667,6 @@ background: rgba(63, 81, 181, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -458,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -502,6 +872,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +923,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #3F51B5; @@ -590,6 +962,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -651,6 +1024,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); } @@ -659,6 +1039,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -667,6 +1050,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -676,16 +1062,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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); @@ -696,6 +1168,15 @@ 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; @@ -737,6 +1218,12 @@ 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); @@ -745,10 +1232,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -759,20 +1242,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f5f5f5; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -781,6 +1286,7 @@ 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; @@ -791,41 +1297,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #B00020; } + .p-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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1401,7 @@ } .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; @@ -867,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1458,107 @@ 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); @@ -900,6 +1569,18 @@ 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; } @@ -965,6 +1646,12 @@ 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); @@ -973,13 +1660,14 @@ 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.12); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .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; @@ -993,17 +1681,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 3rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1844,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1098,30 +2030,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(0, 0, 0, 0.38); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2067,7 @@ 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); @@ -1146,6 +2081,15 @@ .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; @@ -1165,27 +2109,15 @@ color: #B00020; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 1rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 3rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 3rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 1rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 3rem; } @@ -1225,12 +2157,68 @@ padding: 1.25rem 1.25rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1260,6 +2248,12 @@ 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); @@ -1281,12 +2275,16 @@ } .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.12); + 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; @@ -1297,11 +2295,118 @@ border-color: #B00020; } + .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); @@ -1312,6 +2417,15 @@ 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); @@ -1379,6 +2493,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -1402,6 +2517,12 @@ 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); @@ -1410,10 +2531,6 @@ 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.12); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -1433,14 +2550,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .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-invalid.p-component > .p-inputtext { @@ -1469,10 +2603,55 @@ 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; @@ -1481,15 +2660,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2668,78 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #3F51B5; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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); @@ -1545,7 +2756,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #3F51B5; @@ -1598,6 +2808,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1624,25 +2872,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #3F51B5; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #3F51B5; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1653,6 +2964,15 @@ box-shadow: none; border-color: #3F51B5; } + .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); @@ -1708,53 +3028,152 @@ background-color: #dcdcdc; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #B00020; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #3F51B5; @@ -1763,13 +3182,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(63, 81, 181, 0.68); color: #ffffff; border-color: transparent; @@ -1779,12 +3199,12 @@ color: #3F51B5; border: 0 none; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(63, 81, 181, 0.16); color: #3F51B5; border: 0 none; @@ -1793,11 +3213,11 @@ color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3226,12 @@ color: #3F51B5; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(63, 81, 181, 0.16); color: #3F51B5; border-color: transparent; @@ -1819,15 +3239,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,331 +3320,457 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #ff4081; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196F3; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #2196F3; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196F3; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196F3; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #3F51B5; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #3F51B5; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3798,8 @@ height: 3rem; background: #ff4081; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 64, 129, 0.92); @@ -2304,263 +3852,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #ff4081; - border: 0 none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 64, 129, 0.04); - border-color: transparent; - color: #ff4081; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 64, 129, 0.16); - border-color: transparent; - color: #ff4081; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - border-color: transparent; - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(33, 150, 243, 0.16); - border-color: transparent; - color: #2196F3; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 0 none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3977,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4014,241 @@ color: #3F51B5; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4384,10 @@ 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); } @@ -2821,17 +4467,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #3F51B5; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4533,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -2915,6 +4557,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2943,6 +4586,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2975,6 +4619,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4672,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; margin: 0; @@ -3055,13 +4750,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; @@ -3077,6 +4782,59 @@ background: rgba(0, 0, 0, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4867,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4875,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3198,31 +4997,72 @@ color: rgba(0, 0, 0, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 1rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; margin: 0; @@ -3231,13 +5071,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; @@ -3253,6 +5103,117 @@ background: rgba(0, 0, 0, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5239,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3308,6 +5351,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3326,7 +5370,7 @@ .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 { + .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 { @@ -3367,6 +5411,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5672,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5688,7 @@ .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 { + .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 { @@ -3564,6 +5778,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3572,6 +5803,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5896,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3687,6 +5938,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5960,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3716,7 +6024,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(0, 0, 0, 0.12); + border-top: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6034,32 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(0, 0, 0, 0.12); + border-left: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -3751,6 +6079,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3786,10 +6115,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3810,6 +6256,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6267,244 @@ background: rgba(0, 0, 0, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6525,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6548,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6564,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3888,6 +6595,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3910,12 +6687,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3936,6 +6713,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6875,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6905,12 @@ background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 1rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6918,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4031,12 +7014,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4047,6 +7030,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4056,6 +7192,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; @@ -4065,6 +7205,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7226,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4105,6 +7301,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4169,6 +7409,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4178,6 +7450,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7474,48 @@ color: rgba(0, 0, 0, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4208,7 +7523,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7535,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4255,7 +7579,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4263,6 +7587,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4285,6 +7619,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7773,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: transparent; @@ -4364,6 +7963,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4399,7 +8007,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4407,6 +8015,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4422,6 +8040,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8053,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8093,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 1rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8170,16 @@ color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -4518,7 +8216,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4526,6 +8224,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4555,6 +8263,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: transparent; @@ -4595,6 +8409,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4630,7 +8453,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4638,6 +8461,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4653,7 +8486,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(0, 0, 0, 0.12); @@ -4662,95 +8496,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 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-menuitem-separator { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 9rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 11rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 11rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8598,7 @@ background: #ffffff; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(0, 0, 0, 0.87); @@ -4809,6 +8648,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4844,7 +8692,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(0, 0, 0, 0.87); @@ -4852,6 +8700,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4900,11 +8758,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); @@ -4945,6 +8857,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -4965,6 +8917,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8938,62 @@ color: #3F51B5; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -5006,6 +9008,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -5042,7 +9054,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -5050,6 +9062,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -5072,6 +9094,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5113,6 +9155,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #B71C1C; } + .p-inline-message.p-inline-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #212121; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5124,6 +9184,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5137,6 +9246,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,6 +9304,30 @@ .p-message.p-message-error .p-message-close { color: #B71C1C; } + .p-message.p-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5207,6 +9341,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9448,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5290,6 +9498,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #B71C1C; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5392,6 +9904,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9917,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10037,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5473,6 +10101,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5502,6 +10163,14 @@ background-color: #D32F2F; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #ff4081; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #212121; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10184,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5539,6 +10246,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10257,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -5564,6 +10291,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10511,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5625,6 +10582,67 @@ stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5647,6 +10665,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5655,6 +10705,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #3F51B5; color: #ffffff; @@ -5679,15 +10745,48 @@ background-color: #D32F2F; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #ff4081; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #212121; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5743,8 +10842,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10852,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled: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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10997,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(255, 64, 129, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 64, 129, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(255, 64, 129, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 64, 129, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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; @@ -6061,6 +11308,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #B00020; } @@ -6071,72 +11330,13 @@ 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-calendar-disabled):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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11346,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11356,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(63, 81, 181, 0.16); + } + .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; } @@ -6213,21 +11406,15 @@ 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-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11425,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @@ -6280,8 +11482,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11492,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11568,8 @@ box-shadow: inset 0 -2px 0 0 #3F51B5; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11579,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11589,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(63, 81, 181, 0.16); + } + .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; } @@ -6517,6 +11717,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11747,53 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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-inputtext.p-variant-filled: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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11870,12 @@ background: rgba(0, 0, 0, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11885,50 @@ .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.p-variant-filled { + 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-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); @@ -6648,75 +11943,12 @@ 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; } @@ -6742,19 +11974,6 @@ 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; } @@ -6854,32 +12073,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } @@ -6900,7 +12125,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12221,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12345,8 @@ background: rgba(63, 81, 181, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12356,50 @@ .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.p-variant-filled { + 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-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(63, 81, 181, 0.16); @@ -7227,11 +12516,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index cef4a71..62e2891 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -1,16 +1,17 @@ :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%,.04); - --surface-d:hsla(0,0%,100%,.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; + --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; @@ -32,15 +33,15 @@ --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%,.12); - --surface-hover:hsla(0,0%,100%,.04); + --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); @@ -295,6 +296,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +458,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -387,6 +605,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -435,6 +654,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); @@ -443,10 +668,6 @@ background: rgba(206, 147, 216, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -458,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -502,6 +873,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +924,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #CE93D8; @@ -590,6 +963,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -651,6 +1025,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -659,6 +1040,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -667,6 +1051,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -676,16 +1063,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { 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; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -696,6 +1169,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -737,6 +1219,12 @@ 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); @@ -745,10 +1233,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -759,20 +1243,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -781,6 +1287,7 @@ 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; @@ -791,41 +1298,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: rgba(255, 255, 255, 0.08); } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1402,7 @@ } .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; @@ -867,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1459,107 @@ 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 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; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -900,6 +1570,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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; } @@ -965,6 +1647,12 @@ 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); @@ -973,13 +1661,14 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } + .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; @@ -993,17 +1682,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1845,182 @@ width: 2.25rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: 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: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1098,30 +2031,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #CE93D8; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2068,7 @@ 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); @@ -1146,6 +2082,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1165,27 +2110,15 @@ color: #f44435; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1225,12 +2158,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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 rgba(255, 255, 255, 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; @@ -1260,6 +2249,12 @@ 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); @@ -1281,12 +2276,16 @@ } .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.12); + 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; @@ -1297,11 +2296,118 @@ border-color: #f44435; } + .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 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; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1312,6 +2418,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1379,6 +2494,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -1402,6 +2518,12 @@ 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); @@ -1410,10 +2532,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } @@ -1433,14 +2551,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .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-invalid.p-component > .p-inputtext { @@ -1460,19 +2595,64 @@ background: rgba(206, 147, 216, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { - background: #EF9A9A; + background: #ef9a9a; } .p-password-panel .p-password-meter .p-password-strength.medium { - background: #FFF59D; + background: #fff59d; } .p-password-panel .p-password-meter .p-password-strength.strong { - background: #C5E1A5; + 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 rgba(255, 255, 255, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -1481,15 +2661,7 @@ 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); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2669,78 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #CE93D8; + } + .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:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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); @@ -1545,7 +2757,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #CE93D8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #CE93D8; @@ -1598,6 +2809,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1624,25 +2873,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #CE93D8; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #CE93D8; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1653,6 +2965,15 @@ box-shadow: none; border-color: #CE93D8; } + .p-treeselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1708,53 +3029,152 @@ background-color: rgba(255, 255, 255, 0.1); } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #121212; background: #CE93D8; @@ -1763,13 +3183,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #121212; border-color: transparent; @@ -1779,12 +3200,12 @@ color: #CE93D8; border: 0px none; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 0px none; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 0px none; @@ -1793,11 +3214,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3227,12 @@ color: #CE93D8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border-color: transparent; @@ -1819,15 +3240,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,305 +3321,354 @@ .p-fluid .p-button-icon-only { width: 2.25rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0px none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #A5D6A7; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212121; - background: #90CAF9; + background: #90caf9; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212121; - background: #C5E1A5; + background: #c5e1a5; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212121; - background: #FFF59D; + background: #fff59d; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #212121; - background: #CE93D8; + background: #ce93d8; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212121; - background: #EF9A9A; + background: #ef9a9a; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); border-color: transparent; - color: #EF9A9A; + color: #ef9a9a; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); border-color: transparent; - color: #EF9A9A; + 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: 0px 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: 0px 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: 0px 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 { @@ -2206,25 +3676,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #CE93D8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3799,8 @@ height: 3rem; background: #A5D6A7; color: #212121; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(165, 214, 167, 0.92); @@ -2304,263 +3853,120 @@ border-radius: 4px; } + .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; + } + .p-splitbutton { border-radius: 4px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #A5D6A7; - border: 0px none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 214, 167, 0.04); - color: #A5D6A7; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 214, 167, 0.04); - border-color: transparent; - color: #A5D6A7; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(165, 214, 167, 0.16); - border-color: transparent; - color: #A5D6A7; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #90CAF9; - border: 0px none; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - border-color: transparent; - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(144, 202, 249, 0.16); - border-color: transparent; - color: #90CAF9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #C5E1A5; - border: 0px none; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FFF59D; - border: 0px none; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - border-color: transparent; - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 245, 157, 0.16); - border-color: transparent; - color: #FFF59D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF9A9A; - border: 0px none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF9A9A; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - border-color: transparent; - color: #EF9A9A; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - border-color: transparent; - color: #EF9A9A; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3978,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4015,241 @@ color: #CE93D8; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4353,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4385,10 @@ 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); } @@ -2821,17 +4468,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #222222; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #CE93D8; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4534,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2915,6 +4558,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2943,6 +4587,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2975,6 +4620,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4673,76 @@ padding: 0.75rem; } + .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.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-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3055,13 +4751,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3077,6 +4783,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4868,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4876,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3198,31 +4998,72 @@ color: rgba(255, 255, 255, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3231,13 +5072,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3253,6 +5104,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5240,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3308,6 +5352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3326,7 +5371,7 @@ .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 { + .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 { @@ -3367,6 +5412,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5673,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5689,7 @@ .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 { + .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 { @@ -3564,6 +5779,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3572,6 +5804,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5897,25 @@ padding: 0.75rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3687,6 +5939,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5961,62 @@ padding: 0.75rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3716,7 +6025,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6035,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -3751,6 +6080,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3786,10 +6116,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3810,6 +6257,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6268,244 @@ background: rgba(255, 255, 255, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6526,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6549,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6565,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3888,6 +6596,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3910,12 +6688,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -3936,6 +6714,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6876,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6906,12 @@ background: #262626; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6919,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4031,12 +7015,12 @@ color: #121212; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -4047,6 +7031,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4056,6 +7193,10 @@ .p-sidebar .p-sidebar-header { padding: 0.75rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4065,6 +7206,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7227,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4105,6 +7302,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4169,6 +7410,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4178,6 +7451,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7475,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4208,7 +7524,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7536,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4255,7 +7580,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4263,6 +7588,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4285,6 +7620,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7774,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: #1e1e1e; @@ -4364,6 +7964,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4399,7 +8008,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4407,6 +8016,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4422,6 +8041,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8054,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { - width: 12.5rem; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8094,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.75rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(255, 255, 255, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8171,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4518,7 +8217,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4526,6 +8225,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4555,6 +8264,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4595,6 +8410,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4630,7 +8454,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4638,6 +8462,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4653,7 +8487,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); @@ -4662,95 +8497,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 rgba(255, 255, 255, 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8599,7 @@ background: #1e1e1e; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4809,6 +8649,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4844,7 +8693,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4852,6 +8701,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4900,11 +8759,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4945,6 +8858,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -4965,6 +8918,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8939,62 @@ color: #CE93D8; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2b2b2b; @@ -5006,6 +9009,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5042,7 +9055,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5050,6 +9063,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -5072,31 +9095,51 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; border-radius: 4px; } .p-inline-message.p-inline-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 1px; - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-info .p-inline-message-icon { - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 1px; - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-success .p-inline-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 1px; color: #7f6003; @@ -5105,13 +9148,31 @@ color: #7f6003; } .p-inline-message.p-inline-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 1px; - color: #B71C1C; + color: #b71c1c; } .p-inline-message.p-inline-message-error .p-inline-message-icon { - color: #B71C1C; + color: #b71c1c; + } + .p-inline-message.p-inline-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #121212; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #121212; } .p-inline-message .p-inline-message-icon { font-size: 1rem; @@ -5124,6 +9185,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5137,6 +9247,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5147,31 +9258,31 @@ box-shadow: none; } .p-message.p-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-icon { - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-close { - color: #01579B; + color: #01579b; } .p-message.p-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-close { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5183,16 +9294,40 @@ color: #7f6003; } .p-message.p-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-icon { - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-close { - color: #B71C1C; + color: #b71c1c; + } + .p-message.p-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-secondary .p-message-icon { + color: #121212; + } + .p-message.p-message-secondary .p-message-close { + color: #121212; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-contrast .p-message-icon { + color: #121212; + } + .p-message.p-message-contrast .p-message-close { + color: #121212; } .p-message .p-message-text { font-size: 1rem; @@ -5207,6 +9342,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9449,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5251,27 +9460,27 @@ box-shadow: none; } .p-toast .p-toast-message.p-toast-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + 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; + color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + 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; + color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5281,14 +9490,318 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + 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; + color: #b71c1c; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #A5D6A7; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #121212; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; } .p-galleria .p-galleria-close { @@ -5392,6 +9905,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9918,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10038,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5473,6 +10102,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #CE93D8; color: #121212; @@ -5487,21 +10149,29 @@ color: #121212; } .p-badge.p-badge-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-badge.p-badge-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-badge.p-badge-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-badge.p-badge-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-badge.p-badge-secondary { + background-color: #A5D6A7; + color: #121212; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #121212; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10185,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5539,6 +10247,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10258,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5564,6 +10292,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10512,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5587,7 +10545,7 @@ .p-progress-spinner-circle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; - stroke: #B71C1C; + stroke: #b71c1c; animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; stroke-linecap: round; } @@ -5613,18 +10571,79 @@ } @keyframes p-progress-spinner-color { 100%, 0% { - stroke: #B71C1C; + stroke: #b71c1c; } 40% { - stroke: #01579B; + stroke: #01579b; } 66% { - stroke: #1B5E20; + stroke: #1b5e20; } 80%, 90% { stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5647,6 +10666,38 @@ height: 1.15rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5655,6 +10706,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #CE93D8; color: #121212; @@ -5664,30 +10731,63 @@ border-radius: 4px; } .p-tag.p-tag-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-tag.p-tag-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-tag.p-tag-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-tag.p-tag-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-tag.p-tag-secondary { + background-color: #A5D6A7; + color: #121212; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #121212; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5743,8 +10843,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10853,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:hover { background-color: rgba(255, 255, 255, 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)); + 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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:focus { box-shadow: none; background-color: rgba(255, 255, 255, 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container { + 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, #CE93D8, #CE93D8), 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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10998,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(165, 214, 167, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(165, 214, 167, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(165, 214, 167, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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 rgba(255, 255, 255, 0.3); background: #1e1e1e; @@ -6061,6 +11309,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #f44435; } @@ -6071,72 +11331,13 @@ 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: rgba(255, 255, 255, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), 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; - } - .p-input-filled .p-calendar-w-btn .p-inputtext { - background-image: none; - background: transparent; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11347,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11357,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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; } - .p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(206, 147, 216, 0.16); + } + .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; } @@ -6213,21 +11407,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11426,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: rgba(255, 255, 255, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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: rgba(255, 255, 255, 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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @@ -6280,8 +11483,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11493,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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; } - .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:focus { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11569,8 @@ box-shadow: inset 0 -2px 0 0 #CE93D8; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11580,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11590,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled:not(.p-disabled):hover { background-color: rgba(255, 255, 255, 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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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; } - .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .p-input-filled .p-dropdown .p-inputtext:enabled:focus { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(206, 147, 216, 0.16); + } + .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; } @@ -6517,6 +11718,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11748,53 @@ 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):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: rgba(255, 255, 255, 0.1); + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11871,12 @@ background: rgba(255, 255, 255, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11886,50 @@ .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.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled: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; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); @@ -6648,75 +11944,12 @@ 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: rgba(255, 255, 255, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), 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; - } - .p-input-filled .p-multiselect .p-inputtext { - background-image: none; - background: transparent; - } - .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, #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: rgba(255, 255, 255, 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; } @@ -6742,19 +11975,6 @@ 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; } @@ -6854,32 +12074,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid rgba(255, 255, 255, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 rgba(255, 255, 255, 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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } @@ -6900,7 +12126,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(165, 214, 167, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12222,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12346,8 @@ background: rgba(206, 147, 216, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12357,50 @@ .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.p-variant-filled { + 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, #CE93D8, #CE93D8), 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; + } + .p-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled: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; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(206, 147, 216, 0.16); @@ -7227,11 +12517,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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.p-button:not(.p-disabled).p-focus.p-highlight { + .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); } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 9c701c3..3203746 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -1,16 +1,17 @@ :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%,.04); - --surface-d:hsla(0,0%,100%,.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; + --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; @@ -32,15 +33,15 @@ --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%,.12); - --surface-hover:hsla(0,0%,100%,.04); + --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); @@ -295,6 +296,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +458,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +491,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -387,6 +605,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -435,6 +654,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); @@ -443,10 +668,6 @@ background: rgba(159, 168, 218, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -458,6 +679,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -502,6 +873,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +924,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #9FA8DA; @@ -590,6 +963,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -651,6 +1025,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); } @@ -659,6 +1040,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -667,6 +1051,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); } @@ -676,16 +1063,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .p-cascadeselect { 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; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -696,6 +1169,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -737,6 +1219,12 @@ 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); @@ -745,10 +1233,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.04); } @@ -759,20 +1243,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: rgba(255, 255, 255, 0.06); + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -781,6 +1287,7 @@ 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; @@ -791,41 +1298,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: rgba(255, 255, 255, 0.08); } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1402,7 @@ } .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; @@ -867,6 +1433,14 @@ border-color: #f44435; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1459,107 @@ 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 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; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -900,6 +1570,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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; } @@ -965,6 +1647,12 @@ 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); @@ -973,13 +1661,14 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } + .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; @@ -993,17 +1682,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: rgba(255, 255, 255, 0.06); + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1845,182 @@ width: 2.25rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: 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: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1098,30 +2031,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #9FA8DA; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2068,7 @@ 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); @@ -1146,6 +2082,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1165,27 +2110,15 @@ color: #f44435; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1225,12 +2158,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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 rgba(255, 255, 255, 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; @@ -1260,6 +2249,12 @@ 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); @@ -1281,12 +2276,16 @@ } .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.12); + 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; @@ -1297,11 +2296,118 @@ border-color: #f44435; } + .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 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; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1312,6 +2418,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1379,6 +2494,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -1402,6 +2518,12 @@ 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); @@ -1410,10 +2532,6 @@ 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: rgba(255, 255, 255, 0.12); - } - .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); } @@ -1433,14 +2551,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: rgba(255, 255, 255, 0.06); + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: rgba(255, 255, 255, 0.1); + + .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-invalid.p-component > .p-inputtext { @@ -1460,19 +2595,64 @@ background: rgba(159, 168, 218, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { - background: #EF9A9A; + background: #ef9a9a; } .p-password-panel .p-password-meter .p-password-strength.medium { - background: #FFF59D; + background: #fff59d; } .p-password-panel .p-password-meter .p-password-strength.strong { - background: #C5E1A5; + 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 rgba(255, 255, 255, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; @@ -1481,15 +2661,7 @@ 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); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2669,78 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #9FA8DA; + } + .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:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: rgba(255, 255, 255, 0.08); - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: rgba(255, 255, 255, 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); @@ -1545,7 +2757,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #9FA8DA; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #9FA8DA; @@ -1598,6 +2809,44 @@ border-color: #f44435; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: rgba(255, 255, 255, 0.3); border: 0 none; @@ -1624,25 +2873,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #9FA8DA; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #9FA8DA; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { 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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1653,6 +2965,15 @@ box-shadow: none; border-color: #9FA8DA; } + .p-treeselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 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); @@ -1708,53 +3029,152 @@ background-color: rgba(255, 255, 255, 0.1); } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #262626; - border-color: rgba(255, 255, 255, 0.12); - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #121212; background: #9FA8DA; @@ -1763,13 +3183,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(159, 168, 218, 0.68); color: #121212; border-color: transparent; @@ -1779,12 +3200,12 @@ color: #9FA8DA; border: 0px none; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 168, 218, 0.04); color: #9FA8DA; border: 0px none; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border: 0px none; @@ -1793,11 +3214,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3227,12 @@ color: #9FA8DA; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; border-color: transparent; @@ -1819,15 +3240,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,305 +3321,354 @@ .p-fluid .p-button-icon-only { width: 2.25rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0px none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #212121; - background: #90CAF9; + background: #90caf9; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); - color: #90CAF9; + color: #90caf9; border: 0px none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; - color: #90CAF9; + color: #90caf9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(144, 202, 249, 0.04); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(144, 202, 249, 0.16); border-color: transparent; - color: #90CAF9; + color: #90caf9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #212121; - background: #C5E1A5; + background: #c5e1a5; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); - color: #C5E1A5; + color: #c5e1a5; border: 0px none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; - color: #C5E1A5; + color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; - color: #C5E1A5; + color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212121; - background: #FFF59D; + background: #fff59d; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); - color: #FFF59D; + color: #fff59d; border: 0px none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; - color: #FFF59D; + color: #fff59d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 245, 157, 0.04); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 245, 157, 0.16); border-color: transparent; - color: #FFF59D; + color: #fff59d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #212121; - background: #CE93D8; + background: #ce93d8; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); - color: #CE93D8; + color: #ce93d8; border: 0px none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; - color: #CE93D8; + color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; - color: #CE93D8; + color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #212121; - background: #EF9A9A; + background: #ef9a9a; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + color: #ef9a9a; border: 0px none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; - color: #EF9A9A; + color: #ef9a9a; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 154, 154, 0.04); border-color: transparent; - color: #EF9A9A; + color: #ef9a9a; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(239, 154, 154, 0.16); border-color: transparent; - color: #EF9A9A; + 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: 0px 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: 0px 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: 0px 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 { @@ -2206,25 +3676,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #9FA8DA; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #9FA8DA; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3799,8 @@ height: 3rem; background: #F48FB1; color: #212121; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(244, 143, 177, 0.92); @@ -2304,263 +3853,120 @@ border-radius: 4px; } + .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; + } + .p-splitbutton { border-radius: 4px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #9FA8DA; - border: 0px none; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 168, 218, 0.04); - color: #9FA8DA; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(159, 168, 218, 0.04); - color: #9FA8DA; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 0px none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + .p-carousel { + display: flex; + flex-direction: column; } - .p-splitbutton.p-button-info.p-button-outlined > .p-button { - background-color: transparent; - color: #90CAF9; - border: 0px none; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(144, 202, 249, 0.04); - border-color: transparent; - color: #90CAF9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(144, 202, 249, 0.16); - border-color: transparent; - color: #90CAF9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .p-splitbutton.p-button-success.p-button-outlined > .p-button { - background-color: transparent; - color: #C5E1A5; - border: 0px none; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-splitbutton.p-button-warning.p-button-outlined > .p-button { - background-color: transparent; - color: #FFF59D; - border: 0px none; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 245, 157, 0.04); - border-color: transparent; - color: #FFF59D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 245, 157, 0.16); - border-color: transparent; - color: #FFF59D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-help.p-button-outlined > .p-button { - background-color: transparent; - color: #CE93D8; - border: 0px none; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF9A9A; - border: 0px none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - color: #EF9A9A; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - color: #EF9A9A; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF9A9A; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 154, 154, 0.04); - border-color: transparent; - color: #EF9A9A; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 154, 154, 0.16); - border-color: transparent; - color: #EF9A9A; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3978,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4015,241 @@ color: #9FA8DA; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4353,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4385,10 @@ 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); } @@ -2821,17 +4468,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #222222; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #9FA8DA; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4534,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -2915,6 +4558,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2943,6 +4587,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.6); @@ -2975,6 +4620,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4673,76 @@ padding: 0.75rem; } + .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.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-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3055,13 +4751,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3077,6 +4783,59 @@ background: rgba(255, 255, 255, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4868,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4876,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3198,31 +4998,72 @@ color: rgba(255, 255, 255, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #1e1e1e; - color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid 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:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, 0.12); + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3231,13 +5072,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3253,6 +5104,117 @@ background: rgba(255, 255, 255, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5240,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3308,6 +5352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3326,7 +5371,7 @@ .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 { + .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 { @@ -3367,6 +5412,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5673,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5689,7 @@ .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 { + .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 { @@ -3564,6 +5779,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3572,6 +5804,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5897,25 @@ padding: 0.75rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3687,6 +5939,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5961,62 @@ padding: 0.75rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3716,7 +6025,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(255, 255, 255, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6035,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(255, 255, 255, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -3751,6 +6080,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); @@ -3786,10 +6116,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6184,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3810,6 +6257,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6268,244 @@ background: rgba(255, 255, 255, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6526,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6549,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6565,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -3888,6 +6596,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -3910,12 +6688,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -3936,6 +6714,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6876,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6906,12 @@ background: #262626; color: rgba(255, 255, 255, 0.87); padding: 0.75rem 1.25rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6919,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4031,12 +7015,12 @@ color: #121212; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #262626; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(38, 38, 38, 0); border-bottom-color: #242424; } @@ -4047,6 +7031,159 @@ border-top-color: #262626; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4056,6 +7193,10 @@ .p-sidebar .p-sidebar-header { padding: 0.75rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4065,6 +7206,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7227,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4105,6 +7302,50 @@ border-bottom-color: #444444; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4169,6 +7410,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4178,6 +7451,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7475,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4208,7 +7524,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7536,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4255,7 +7580,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4263,6 +7588,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4285,6 +7620,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7774,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: #1e1e1e; @@ -4364,6 +7964,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4399,7 +8008,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4407,6 +8016,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4422,6 +8041,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8054,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { - width: 12.5rem; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8094,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.75rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(255, 255, 255, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8171,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4518,7 +8217,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4526,6 +8225,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4555,6 +8264,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4595,6 +8410,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4630,7 +8454,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -4638,6 +8462,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4653,7 +8487,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(255, 255, 255, 0.12); @@ -4662,95 +8497,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-separator { - border-top: 1px solid rgba(255, 255, 255, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 rgba(255, 255, 255, 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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8599,7 @@ background: #1e1e1e; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4809,6 +8649,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: none; @@ -4844,7 +8693,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4852,6 +8701,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -4900,11 +8759,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4945,6 +8858,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -4965,6 +8918,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8939,62 @@ color: #9FA8DA; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #2b2b2b; @@ -5006,6 +9009,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5042,7 +9055,7 @@ } .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); + background: rgba(255, 255, 255, 0.04); } .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); @@ -5050,6 +9063,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } .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); @@ -5072,31 +9095,51 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; border-radius: 4px; } .p-inline-message.p-inline-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 1px; - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-info .p-inline-message-icon { - color: #01579B; + color: #01579b; } .p-inline-message.p-inline-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 1px; - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-success .p-inline-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-inline-message.p-inline-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 1px; color: #7f6003; @@ -5105,13 +9148,31 @@ color: #7f6003; } .p-inline-message.p-inline-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 1px; - color: #B71C1C; + color: #b71c1c; } .p-inline-message.p-inline-message-error .p-inline-message-icon { - color: #B71C1C; + color: #b71c1c; + } + .p-inline-message.p-inline-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #121212; + } + .p-inline-message.p-inline-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 1px; + color: #121212; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #121212; } .p-inline-message .p-inline-message-icon { font-size: 1rem; @@ -5124,6 +9185,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5137,6 +9247,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5147,31 +9258,31 @@ box-shadow: none; } .p-message.p-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-icon { - color: #01579B; + color: #01579b; } .p-message.p-message-info .p-message-close { - color: #01579B; + color: #01579b; } .p-message.p-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-icon { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-success .p-message-close { - color: #1B5E20; + color: #1b5e20; } .p-message.p-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5183,16 +9294,40 @@ color: #7f6003; } .p-message.p-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-icon { - color: #B71C1C; + color: #b71c1c; } .p-message.p-message-error .p-message-close { - color: #B71C1C; + color: #b71c1c; + } + .p-message.p-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-secondary .p-message-icon { + color: #121212; + } + .p-message.p-message-secondary .p-message-close { + color: #121212; + } + .p-message.p-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-message.p-message-contrast .p-message-icon { + color: #121212; + } + .p-message.p-message-contrast .p-message-close { + color: #121212; } .p-message .p-message-text { font-size: 1rem; @@ -5207,6 +9342,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9449,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5251,27 +9460,27 @@ box-shadow: none; } .p-toast .p-toast-message.p-toast-message-info { - background: #B3E5FC; + background: #b3e5fc; border: solid transparent; border-width: 0 0 0 0; - color: #01579B; + 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; + color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { - background: #C8E6C9; + background: #c8e6c9; border: solid transparent; border-width: 0 0 0 0; - color: #1B5E20; + 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; + color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { - background: #FFECB3; + background: #ffecb3; border: solid transparent; border-width: 0 0 0 0; color: #7f6003; @@ -5281,14 +9490,318 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { - background: #FFCDD2; + background: #ffcdd2; border: solid transparent; border-width: 0 0 0 0; - color: #B71C1C; + 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; + color: #b71c1c; + } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #F48FB1; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #ffffff; + border: solid transparent; + border-width: 0 0 0 0; + color: #121212; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #121212; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; } .p-galleria .p-galleria-close { @@ -5392,6 +9905,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9918,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10038,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; @@ -5473,6 +10102,39 @@ border: 2px solid #1e1e1e; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9FA8DA; color: #121212; @@ -5487,21 +10149,29 @@ color: #121212; } .p-badge.p-badge-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-badge.p-badge-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-badge.p-badge-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-badge.p-badge-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-badge.p-badge-secondary { + background-color: #F48FB1; + color: #121212; + } + .p-badge.p-badge-contrast { + background-color: #ffffff; + color: #121212; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10185,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); @@ -5539,6 +10247,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10258,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -5564,6 +10292,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10512,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5587,7 +10545,7 @@ .p-progress-spinner-circle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; - stroke: #B71C1C; + stroke: #b71c1c; animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; stroke-linecap: round; } @@ -5613,18 +10571,79 @@ } @keyframes p-progress-spinner-color { 100%, 0% { - stroke: #B71C1C; + stroke: #b71c1c; } 40% { - stroke: #01579B; + stroke: #01579b; } 66% { - stroke: #1B5E20; + stroke: #1b5e20; } 80%, 90% { stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5647,6 +10666,38 @@ height: 1.15rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -5655,6 +10706,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #9FA8DA; color: #121212; @@ -5664,30 +10731,63 @@ border-radius: 4px; } .p-tag.p-tag-success { - background-color: #C5E1A5; + background-color: #c5e1a5; color: #212121; } .p-tag.p-tag-info { - background-color: #90CAF9; + background-color: #90caf9; color: #212121; } .p-tag.p-tag-warning { - background-color: #FFF59D; + background-color: #fff59d; color: #212121; } .p-tag.p-tag-danger { - background-color: #EF9A9A; + background-color: #ef9a9a; color: #212121; } + .p-tag.p-tag-secondary { + background-color: #F48FB1; + color: #121212; + } + .p-tag.p-tag-contrast { + background-color: #ffffff; + color: #121212; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5743,8 +10843,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10853,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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.87), rgba(255, 255, 255, 0.87)); + 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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled:focus { box-shadow: none; background-color: rgba(255, 255, 255, 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container { + 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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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)); + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container: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; + } + .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10998,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(244, 143, 177, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(244, 143, 177, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(244, 143, 177, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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 rgba(255, 255, 255, 0.3); background: #1e1e1e; @@ -6061,6 +11309,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #f44435; } @@ -6071,72 +11331,13 @@ 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: 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; - } - .p-input-filled .p-calendar-w-btn .p-inputtext { - background-image: none; - background: transparent; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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)); - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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; - } - .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11347,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11357,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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)); } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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; } - .p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(159, 168, 218, 0.16); + } + .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; } @@ -6213,21 +11407,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: rgba(255, 255, 255, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11426,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: rgba(255, 255, 255, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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: rgba(255, 255, 255, 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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @@ -6280,8 +11483,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11493,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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)); } - .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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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; } - .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:focus { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11569,8 @@ box-shadow: inset 0 -2px 0 0 #9FA8DA; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11580,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11590,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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)); } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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; } - .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .p-input-filled .p-dropdown .p-inputtext:enabled:focus { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(159, 168, 218, 0.16); + } + .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; } @@ -6517,6 +11718,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11748,53 @@ 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):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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; + } + .p-inputtext.p-variant-filled: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)); + } + .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: rgba(255, 255, 255, 0.1); + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11871,12 @@ background: rgba(255, 255, 255, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11886,50 @@ .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.p-variant-filled { + 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; + } + .p-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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)); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled: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; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); @@ -6648,75 +11944,12 @@ 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: 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; - } - .p-input-filled .p-multiselect .p-inputtext { - background-image: none; - background: transparent; - } - .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)); - } - .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: rgba(255, 255, 255, 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; } @@ -6742,19 +11975,6 @@ 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; } @@ -6854,32 +12074,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid rgba(255, 255, 255, 0.7); - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid rgba(255, 255, 255, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 rgba(255, 255, 255, 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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } @@ -6900,7 +12126,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(244, 143, 177, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12222,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12346,8 @@ background: rgba(159, 168, 218, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12357,50 @@ .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.p-variant-filled { + 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; + } + .p-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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)); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled: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; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(159, 168, 218, 0.16); @@ -7227,11 +12517,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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.p-button:not(.p-disabled).p-focus.p-highlight { + .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); } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 034abb6..15f70cd 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +457,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -387,6 +604,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -435,6 +653,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); @@ -443,10 +667,6 @@ background: rgba(103, 58, 183, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -458,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -502,6 +872,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +923,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #673AB7; @@ -590,6 +962,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -651,6 +1024,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); } @@ -659,6 +1039,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -667,6 +1050,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -676,16 +1062,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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); @@ -696,6 +1168,15 @@ 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; @@ -737,6 +1218,12 @@ 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); @@ -745,10 +1232,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -759,20 +1242,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f5f5f5; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -781,6 +1286,7 @@ 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; @@ -791,41 +1297,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1401,7 @@ } .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; @@ -867,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1458,107 @@ 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); @@ -900,6 +1569,18 @@ 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; } @@ -965,6 +1646,12 @@ 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); @@ -973,13 +1660,14 @@ 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.12); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .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; @@ -993,17 +1681,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1844,182 @@ width: 2.25rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1098,30 +2030,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(0, 0, 0, 0.38); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2067,7 @@ 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); @@ -1146,6 +2081,15 @@ .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; @@ -1165,27 +2109,15 @@ color: #B00020; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1225,12 +2157,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1260,6 +2248,12 @@ 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); @@ -1281,12 +2275,16 @@ } .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.12); + 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; @@ -1297,11 +2295,118 @@ border-color: #B00020; } + .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); @@ -1312,6 +2417,15 @@ 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); @@ -1379,6 +2493,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -1402,6 +2517,12 @@ 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); @@ -1410,10 +2531,6 @@ 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.12); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -1433,14 +2550,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .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-invalid.p-component > .p-inputtext { @@ -1469,10 +2603,55 @@ 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; @@ -1481,15 +2660,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2668,78 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #673AB7; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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); @@ -1545,7 +2756,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #673AB7; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #673AB7; @@ -1598,6 +2808,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1624,25 +2872,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #673AB7; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #673AB7; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1653,6 +2964,15 @@ box-shadow: none; border-color: #673AB7; } + .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); @@ -1708,53 +3028,152 @@ background-color: #dcdcdc; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #B00020; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #673AB7; @@ -1763,13 +3182,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; @@ -1779,12 +3199,12 @@ color: #673AB7; border: 0 none; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(103, 58, 183, 0.16); color: #673AB7; border: 0 none; @@ -1793,11 +3213,11 @@ color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3226,12 @@ color: #673AB7; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(103, 58, 183, 0.16); color: #673AB7; border-color: transparent; @@ -1819,15 +3239,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,331 +3320,457 @@ .p-fluid .p-button-icon-only { width: 2.25rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #4CAF50; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196F3; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #2196F3; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196F3; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196F3; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #673AB7; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #673AB7; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3798,8 @@ height: 3rem; background: #4CAF50; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(76, 175, 80, 0.92); @@ -2304,263 +3852,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(103, 58, 183, 0.04); - color: #673AB7; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(103, 58, 183, 0.04); - color: #673AB7; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #4CAF50; - border: 0 none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - color: #4CAF50; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - border-color: transparent; - color: #4CAF50; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(76, 175, 80, 0.16); - border-color: transparent; - color: #4CAF50; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - border-color: transparent; - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(33, 150, 243, 0.16); - border-color: transparent; - color: #2196F3; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 0 none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3977,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4014,241 @@ color: #673AB7; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4384,10 @@ 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); } @@ -2821,17 +4467,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #673AB7; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4533,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -2915,6 +4557,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2943,6 +4586,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2975,6 +4619,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4672,76 @@ padding: 0.75rem; } + .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.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-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3055,13 +4750,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; @@ -3077,6 +4782,59 @@ background: rgba(0, 0, 0, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4867,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4875,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3198,31 +4997,72 @@ color: rgba(0, 0, 0, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3231,13 +5071,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; @@ -3253,6 +5103,117 @@ background: rgba(0, 0, 0, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5239,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3308,6 +5351,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3326,7 +5370,7 @@ .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 { + .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 { @@ -3367,6 +5411,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5672,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5688,7 @@ .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 { + .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 { @@ -3564,6 +5778,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3572,6 +5803,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5896,25 @@ padding: 0.75rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3687,6 +5938,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5960,62 @@ padding: 0.75rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3716,7 +6024,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(0, 0, 0, 0.12); + border-top: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6034,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(0, 0, 0, 0.12); + border-left: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -3751,6 +6079,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3786,10 +6115,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3810,6 +6256,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6267,244 @@ background: rgba(0, 0, 0, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6525,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6548,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6564,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3888,6 +6595,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3910,12 +6687,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3936,6 +6713,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6875,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6905,12 @@ background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0.75rem 1.25rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6918,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4031,12 +7014,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4047,6 +7030,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4056,6 +7192,10 @@ .p-sidebar .p-sidebar-header { padding: 0.75rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4065,6 +7205,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7226,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4105,6 +7301,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4169,6 +7409,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4178,6 +7450,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7474,48 @@ color: rgba(0, 0, 0, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4208,7 +7523,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7535,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4255,7 +7579,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4263,6 +7587,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4285,6 +7619,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7773,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: transparent; @@ -4364,6 +7963,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4399,7 +8007,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4407,6 +8015,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4422,6 +8040,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8053,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8093,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.75rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8170,16 @@ color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -4518,7 +8216,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4526,6 +8224,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4555,6 +8263,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4595,6 +8409,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4630,7 +8453,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4638,6 +8461,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4653,7 +8486,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(0, 0, 0, 0.12); @@ -4662,95 +8496,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-separator { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8598,7 @@ background: #ffffff; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(0, 0, 0, 0.87); @@ -4809,6 +8648,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4844,7 +8692,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(0, 0, 0, 0.87); @@ -4852,6 +8700,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4900,11 +8758,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); @@ -4945,6 +8857,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -4965,6 +8917,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8938,62 @@ color: #673AB7; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -5006,6 +9008,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -5042,7 +9054,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -5050,6 +9062,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -5072,6 +9094,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5113,6 +9155,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #B71C1C; } + .p-inline-message.p-inline-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #212121; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5124,6 +9184,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5137,6 +9246,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,6 +9304,30 @@ .p-message.p-message-error .p-message-close { color: #B71C1C; } + .p-message.p-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5207,6 +9341,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9448,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5290,6 +9498,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #B71C1C; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #4CAF50; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5392,6 +9904,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9917,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10037,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5473,6 +10101,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #673AB7; color: #ffffff; @@ -5502,6 +10163,14 @@ background-color: #D32F2F; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #4CAF50; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #212121; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10184,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5539,6 +10246,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10257,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -5564,6 +10291,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10511,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5625,6 +10582,67 @@ stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5647,6 +10665,38 @@ height: 1.15rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5655,6 +10705,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #673AB7; color: #ffffff; @@ -5679,15 +10745,48 @@ background-color: #D32F2F; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #4CAF50; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #212121; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5743,8 +10842,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10852,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled: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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10997,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(76, 175, 80, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(76, 175, 80, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(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-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(76, 175, 80, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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; @@ -6061,6 +11308,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #B00020; } @@ -6071,72 +11330,13 @@ 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-calendar-disabled):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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11346,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11356,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(103, 58, 183, 0.16); + } + .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; } @@ -6213,21 +11406,15 @@ 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-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11425,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @@ -6280,8 +11482,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11492,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11568,8 @@ box-shadow: inset 0 -2px 0 0 #673AB7; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11579,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11589,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(103, 58, 183, 0.16); + } + .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; } @@ -6517,6 +11717,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11747,53 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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-inputtext.p-variant-filled: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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11870,12 @@ background: rgba(0, 0, 0, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11885,50 @@ .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.p-variant-filled { + 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-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); @@ -6648,75 +11943,12 @@ 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; } @@ -6742,19 +11974,6 @@ 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; } @@ -6854,32 +12073,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } @@ -6900,7 +12125,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12221,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12345,8 @@ background: rgba(103, 58, 183, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12356,50 @@ .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.p-variant-filled { + 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-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(103, 58, 183, 0.16); @@ -7227,11 +12516,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 49d36f6..8eb7e3b 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -295,6 +295,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -337,6 +457,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 4px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -369,6 +490,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -387,6 +604,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -435,6 +653,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); @@ -443,10 +667,6 @@ background: rgba(63, 81, 181, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -458,6 +678,156 @@ font-weight: 400; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #B00020; } @@ -502,6 +872,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -552,6 +923,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #3F51B5; @@ -590,6 +962,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -651,6 +1024,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); } @@ -659,6 +1039,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -667,6 +1050,9 @@ outline-offset: 0; box-shadow: none; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); } @@ -676,16 +1062,102 @@ box-shadow: none; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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); @@ -696,6 +1168,15 @@ 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; @@ -737,6 +1218,12 @@ 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); @@ -745,10 +1232,6 @@ 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.12); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -759,20 +1242,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f5f5f5; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .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; + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -781,6 +1286,7 @@ 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; @@ -791,41 +1297,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #B00020; } + .p-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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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); } @@ -837,6 +1401,7 @@ } .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; @@ -867,6 +1432,14 @@ border-color: #B00020; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -885,11 +1458,107 @@ 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); @@ -900,6 +1569,18 @@ 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; } @@ -965,6 +1646,12 @@ 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); @@ -973,13 +1660,14 @@ 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.12); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .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; @@ -993,17 +1681,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1076,18 +1844,182 @@ width: 2.25rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #B00020; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1098,30 +2030,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(0, 0, 0, 0.38); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #B00020; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1133,6 +2067,7 @@ 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); @@ -1146,6 +2081,15 @@ .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; @@ -1165,27 +2109,15 @@ color: #B00020; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1225,12 +2157,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1260,6 +2248,12 @@ 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); @@ -1281,12 +2275,16 @@ } .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.12); + 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; @@ -1297,11 +2295,118 @@ border-color: #B00020; } + .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); @@ -1312,6 +2417,15 @@ 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); @@ -1379,6 +2493,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -1402,6 +2517,12 @@ 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); @@ -1410,10 +2531,6 @@ 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.12); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } @@ -1433,14 +2550,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; + + .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-invalid.p-component > .p-inputtext { @@ -1469,10 +2603,55 @@ 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; @@ -1481,15 +2660,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1497,38 +2668,78 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #3F51B5; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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); @@ -1545,7 +2756,6 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #3F51B5; @@ -1598,6 +2808,44 @@ border-color: #B00020; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1624,25 +2872,88 @@ 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); + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; } .p-slider .p-slider-range { background: #3F51B5; + border-radius: 4px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #3F51B5; border-color: 0 none; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1653,6 +2964,15 @@ box-shadow: none; border-color: #3F51B5; } + .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); @@ -1708,53 +3028,152 @@ background-color: #dcdcdc; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-highlight:hover { - background: #d9d8d9; - border-color: #d9d8d9; - color: rgba(0, 0, 0, 0.87); - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: rgba(0, 0, 0, 0.6); - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #B00020; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #3F51B5; @@ -1763,13 +3182,14 @@ 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; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; border-color: transparent; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: rgba(63, 81, 181, 0.68); color: #ffffff; border-color: transparent; @@ -1779,12 +3199,12 @@ color: #3F51B5; border: 0 none; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(63, 81, 181, 0.16); color: #3F51B5; border: 0 none; @@ -1793,11 +3213,11 @@ color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1806,12 +3226,12 @@ color: #3F51B5; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(63, 81, 181, 0.16); color: #3F51B5; border-color: transparent; @@ -1819,15 +3239,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(0, 0, 0, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1900,331 +3320,457 @@ .p-fluid .p-button-icon-only { width: 2.25rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #ff4081; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196F3; border: 0 none; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); color: #2196F3; border: 0 none; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #2196F3; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196F3; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196F3; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 0 none; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 0 none; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 0 none; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 0 none; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 0 none; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 0 none; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 0 none; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: none; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 0 none; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { 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:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #3F51B5; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: none; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #3F51B5; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2252,6 +3798,8 @@ height: 3rem; background: #ff4081; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 64, 129, 0.92); @@ -2304,263 +3852,120 @@ border-radius: 4px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #ff4081; - border: 0 none; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 64, 129, 0.04); - border-color: transparent; - color: #ff4081; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 64, 129, 0.16); - border-color: transparent; - color: #ff4081; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - border-color: transparent; - color: #2196F3; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(33, 150, 243, 0.16); - border-color: transparent; - color: #2196F3; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 0 none; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2572,6 +3977,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2608,6 +4014,241 @@ color: #3F51B5; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2711,6 +4352,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2742,6 +4384,10 @@ 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); } @@ -2821,17 +4467,17 @@ .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:nth-child(even) { + .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:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #3F51B5; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2887,10 +4533,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -2915,6 +4557,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2943,6 +4586,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(0, 0, 0, 0.6); @@ -2975,6 +4619,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -3022,31 +4672,76 @@ padding: 0.75rem; } + .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.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-controls { padding: 0.75rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-orderlist .p-orderlist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-orderlist .p-orderlist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3055,13 +4750,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; @@ -3077,6 +4782,59 @@ background: rgba(0, 0, 0, 0.04); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3109,6 +4867,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3116,6 +4875,46 @@ box-shadow: none; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3198,31 +4997,72 @@ color: rgba(0, 0, 0, 0.6); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { background: #ffffff; - color: rgba(0, 0, 0, 0.87); border: 1px solid #e0e0e0; + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-picklist .p-picklist-header { + color: rgba(0, 0, 0, 0.87); padding: 0.75rem; font-weight: 500; - border-bottom: 0 none; - border-top-right-radius: 4px; - border-top-left-radius: 4px; } .p-picklist .p-picklist-list { - border: 1px solid #e0e0e0; - background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e0e0e0; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; margin: 0; @@ -3231,13 +5071,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.04); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; @@ -3253,6 +5103,117 @@ background: rgba(0, 0, 0, 0.04); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3278,6 +5239,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3308,6 +5351,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3326,7 +5370,7 @@ .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 { + .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 { @@ -3367,6 +5411,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3459,6 +5672,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3474,7 +5688,7 @@ .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 { + .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 { @@ -3564,6 +5778,23 @@ padding: 0.9375rem 0.9375rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3572,6 +5803,7 @@ font-weight: 400; border-radius: 4px; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3664,6 +5896,25 @@ padding: 0.75rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -3687,6 +5938,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3708,6 +5960,62 @@ padding: 0.75rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3716,7 +6024,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px rgba(0, 0, 0, 0.12); + border-top: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3726,12 +6034,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px rgba(0, 0, 0, 0.12); + border-left: 1px solid rgba(0, 0, 0, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -3751,6 +6079,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); @@ -3786,10 +6115,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; 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-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3797,6 +6183,66 @@ box-shadow: none; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -3810,6 +6256,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); 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-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3820,6 +6267,244 @@ background: rgba(0, 0, 0, 0.12); } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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); @@ -3840,6 +6525,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3862,6 +6548,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3877,6 +6564,26 @@ border-bottom-left-radius: 4px; } + .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; + } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -3888,6 +6595,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3910,12 +6687,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3936,6 +6713,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3961,6 +6875,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3990,14 +6905,12 @@ background: #ffffff; color: rgba(0, 0, 0, 0.87); padding: 0.75rem 1.25rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4005,6 +6918,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4031,12 +7014,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4047,6 +7030,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4056,6 +7192,10 @@ .p-sidebar .p-sidebar-header { padding: 0.75rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 500; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4065,6 +7205,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4085,6 +7226,61 @@ padding: 0.75rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4105,6 +7301,50 @@ border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4169,6 +7409,38 @@ border-color: transparent; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4178,6 +7450,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 4px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4201,6 +7474,48 @@ color: rgba(0, 0, 0, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4208,7 +7523,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4220,6 +7535,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4255,7 +7579,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4263,6 +7587,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4285,6 +7619,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4333,27 +7773,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.75rem; background: transparent; @@ -4364,6 +7963,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4399,7 +8007,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4407,6 +8015,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4422,6 +8040,7 @@ 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; } .p-megamenu .p-submenu-header { margin: 0; @@ -4434,14 +8053,14 @@ } .p-megamenu .p-submenu-list { padding: 0.5rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.5rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4474,6 +8093,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.75rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.04); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 0.5rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.5rem 0; @@ -4481,7 +8170,16 @@ color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -4518,7 +8216,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4526,6 +8224,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4555,6 +8263,112 @@ margin: 0.5rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4595,6 +8409,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4630,7 +8453,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -4638,6 +8461,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4653,7 +8486,8 @@ 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; + min-width: 12.5rem; + border-radius: 4px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid rgba(0, 0, 0, 0.12); @@ -4662,95 +8496,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-separator { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin: 0.5rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4760,6 +8598,7 @@ background: #ffffff; border-radius: 4px; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(0, 0, 0, 0.87); @@ -4809,6 +8648,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); transition: none; @@ -4844,7 +8692,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(0, 0, 0, 0.87); @@ -4852,6 +8700,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -4900,11 +8758,65 @@ border-bottom-left-radius: 4px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 4px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); @@ -4945,6 +8857,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -4965,6 +8917,7 @@ border-top-left-radius: 4px; transition: none; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4985,13 +8938,62 @@ color: #3F51B5; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -5006,6 +9008,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(0, 0, 0, 0.87); @@ -5042,7 +9054,7 @@ } .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); + background: rgba(0, 0, 0, 0.04); } .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); @@ -5050,6 +9062,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: rgba(0, 0, 0, 0.6); + } .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); @@ -5072,6 +9094,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5113,6 +9155,24 @@ .p-inline-message.p-inline-message-error .p-inline-message-icon { color: #B71C1C; } + .p-inline-message.p-inline-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-secondary .p-inline-message-icon { + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast { + background: #212121; + border: solid transparent; + border-width: 1px; + color: #ffffff; + } + .p-inline-message.p-inline-message-contrast .p-inline-message-icon { + color: #ffffff; + } .p-inline-message .p-inline-message-icon { font-size: 1rem; margin-right: 0.5rem; @@ -5124,6 +9184,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5137,6 +9246,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5194,6 +9304,30 @@ .p-message.p-message-error .p-message-close { color: #B71C1C; } + .p-message.p-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-secondary .p-message-icon { + color: #ffffff; + } + .p-message.p-message-secondary .p-message-close { + color: #ffffff; + } + .p-message.p-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-message.p-message-contrast .p-message-icon { + color: #ffffff; + } + .p-message.p-message-contrast .p-message-close { + color: #ffffff; + } .p-message .p-message-text { font-size: 1rem; font-weight: 500; @@ -5207,6 +9341,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5241,6 +9448,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5290,6 +9498,310 @@ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #B71C1C; } + .p-toast .p-toast-message.p-toast-message-secondary { + background: #ff4081; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close { + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast { + background: #212121; + border: solid transparent; + border-width: 0 0 0 0; + color: #ffffff; + } + .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close { + color: #ffffff; + } + + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } .p-galleria .p-galleria-close { margin: 0.5rem; @@ -5392,6 +9904,9 @@ 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 { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5402,6 +9917,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5448,6 +10037,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5473,6 +10101,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5502,6 +10163,14 @@ background-color: #D32F2F; color: #ffffff; } + .p-badge.p-badge-secondary { + background-color: #ff4081; + color: #ffffff; + } + .p-badge.p-badge-contrast { + background-color: #212121; + color: #ffffff; + } .p-badge.p-badge-lg { font-size: 1.125rem; min-width: 2.25rem; @@ -5515,6 +10184,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 4px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -5539,6 +10246,7 @@ margin-left: 0.5rem; border-radius: 4px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5549,10 +10257,29 @@ outline: 0 none; } + .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 .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); + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -5564,6 +10291,210 @@ box-shadow: none; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 4px; @@ -5580,6 +10511,32 @@ line-height: 4px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5625,6 +10582,67 @@ stroke: #7f6003; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 2.75rem; height: 2.75rem; @@ -5647,6 +10665,38 @@ height: 1.15rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -5655,6 +10705,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #3F51B5; color: #ffffff; @@ -5679,15 +10745,48 @@ background-color: #D32F2F; color: #ffffff; } + .p-tag.p-tag-secondary { + background-color: #ff4081; + color: #ffffff; + } + .p-tag.p-tag-contrast { + background-color: #212121; + color: #ffffff; + } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5743,8 +10842,7 @@ .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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -5754,67 +10852,88 @@ 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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input: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-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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input:enabled: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 { + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-variant-filled .p-autocomplete-input.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext { + background-image: none; + background: transparent; + } + .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-autocomplete.p-variant-filled.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-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-autocomplete.p-variant-filled.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token { + padding-top: 0; + padding-bottom: 0; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + font-size: 75%; + } + .p-float-label .p-autocomplete.p-variant-filled .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0; + } .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-autocomplete.p-invalid > .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .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; } @@ -5878,102 +10997,230 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .p-button.p-button-secondary:enabled:focus, +.p-button-group.p-button-secondary > .p-button:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, +.p-button-group.p-button-secondary > .p-button:enabled:active, +.p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(255, 64, 129, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 64, 129, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(255, 64, 129, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(255, 64, 129, 0.16); } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .p-button.p-button-info:enabled:focus, +.p-button-group.p-button-info > .p-button:enabled:focus, +.p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, +.p-button-group.p-button-info > .p-button:enabled:active, +.p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .p-button.p-button-success:enabled:focus, +.p-button-group.p-button-success > .p-button:enabled:focus, +.p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, +.p-button-group.p-button-success > .p-button:enabled:active, +.p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .p-button.p-button-warning:enabled:focus, +.p-button-group.p-button-warning > .p-button:enabled:focus, +.p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, +.p-button-group.p-button-warning > .p-button:enabled:active, +.p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .p-button.p-button-help:enabled:focus, +.p-button-group.p-button-help > .p-button:enabled:focus, +.p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, +.p-button-group.p-button-help > .p-button:enabled:active, +.p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .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 { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .p-button.p-button-danger:enabled:focus, +.p-button-group.p-button-danger > .p-button:enabled:focus, +.p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, +.p-button-group.p-button-danger > .p-button:enabled:active, +.p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, +.p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .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 { 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; @@ -6061,6 +11308,18 @@ .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-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-calendar.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-calendar.p-invalid.p-calendar-w-btn { border-color: #B00020; } @@ -6071,72 +11330,13 @@ 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-calendar-disabled):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-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .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 { - 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 { + .p-cascadeselect .p-cascadeselect-label, +.p-cascadeselect .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6146,12 +11346,7 @@ .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 { + .p-cascadeselect.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6161,50 +11356,48 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-cascadeselect .p-inputtext { + .p-cascadeselect.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { + .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled: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 { + .p-cascadeselect.p-variant-filled .p-inputtext:enabled:hover, .p-cascadeselect.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-cascadeselect .p-cascadeselect-label:hover { + .p-cascadeselect.p-variant-filled .p-inputtext { + border: 0 none; + } + .p-cascadeselect.p-variant-filled .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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.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 { + .p-cascadeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-cascadeselect.p-variant-filled.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-item-content .p-ink { + background-color: rgba(63, 81, 181, 0.16); + } + .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; } @@ -6213,21 +11406,15 @@ 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-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -6238,23 +11425,38 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .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-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .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.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .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 .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @@ -6280,8 +11482,7 @@ .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 { + .p-chips .p-chips-multiple-container.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6291,51 +11492,50 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-chips-multiple-container .p-inputtext { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips .p-chips-multiple-container.p-variant-filled: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 { + .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:hover, .p-chips .p-chips-multiple-container.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-focus, .p-chips.p-invalid .p-chips-multiple-container.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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 { + .p-float-label .p-chips-multiple-container.p-variant-filled .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; @@ -6368,7 +11568,8 @@ box-shadow: inset 0 -2px 0 0 #3F51B5; } - .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { + .p-dropdown .p-inputtext, +.p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; } @@ -6378,12 +11579,7 @@ .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 { + .p-dropdown.p-variant-filled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; @@ -6393,40 +11589,44 @@ background-position: 50% 100%, 50% 100%; background-origin: border-box; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { background-image: none; background: transparent; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { + .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled: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 { + .p-dropdown.p-variant-filled .p-inputtext:enabled:hover, .p-dropdown.p-variant-filled .p-inputtext:enabled:focus { background-image: none; background: transparent; } - .p-input-filled .p-dropdown .p-inputtext { + .p-dropdown.p-variant-filled .p-inputtext { border: 0 none; } - .p-input-filled .p-dropdown.p-invalid { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.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 { + .p-dropdown.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-dropdown.p-variant-filled.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-item .p-ink { + background-color: rgba(63, 81, 181, 0.16); + } + .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; } @@ -6517,6 +11717,18 @@ .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-inputnumber.p-invalid .p-inputtext.p-variant-filled { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputnumber.p-invalid .p-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + border-color: transparent; + } .p-input-filled .p-inputnumber.p-invalid .p-inputtext { border-color: transparent; @@ -6535,19 +11747,53 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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-inputtext.p-variant-filled { + 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-inputtext.p-variant-filled: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-inputtext.p-variant-filled:enabled:focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-inputtext.p-variant-filled.p-invalid.p-component { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:hover { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-inputtext.p-variant-filled.p-invalid.p-component:enabled:focus { + box-shadow: none; + border-color: transparent; + } + .p-fieldset .p-fieldset-legend { border: 0 none; } @@ -6624,7 +11870,12 @@ background: rgba(0, 0, 0, 0.12); } - .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { + .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; } @@ -6634,6 +11885,50 @@ .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.p-variant-filled { + 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-multiselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled: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-multiselect.p-variant-filled:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-multiselect.p-variant-filled .p-inputtext:enabled:hover, .p-multiselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled .p-multiselect-label:hover { + background-image: none; + background: transparent; + } + .p-multiselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-multiselect.p-variant-filled.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-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); @@ -6648,75 +11943,12 @@ 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; } @@ -6742,19 +11974,6 @@ 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; } @@ -6854,32 +12073,38 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid #757575; - } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { + .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-radiobutton-disabled).p-radiobutton-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { + .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.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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 .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } @@ -6900,7 +12125,7 @@ transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { @@ -6996,6 +12221,25 @@ transform: scale(1); } + .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; } @@ -7101,7 +12345,8 @@ background: rgba(63, 81, 181, 0.24); } - .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { + .p-treeselect .p-treeselect-label, +.p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; } @@ -7111,6 +12356,50 @@ .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.p-variant-filled { + 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-treeselect.p-variant-filled .p-inputtext { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled: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-treeselect.p-variant-filled:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled:not(.p-disabled).p-inputwrapper-focus { + box-shadow: none; + background-color: #dcdcdc; + border-color: transparent; + background-size: 100% 2px, 100% 1px; + } + .p-treeselect.p-variant-filled .p-inputtext:enabled:hover, .p-treeselect.p-variant-filled .p-inputtext:enabled:focus { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled .p-treeselect-label:hover { + background-image: none; + background: transparent; + } + .p-treeselect.p-variant-filled.p-invalid { + border-color: transparent; + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled):hover { + background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020); + } + .p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus, .p-treeselect.p-variant-filled.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-item .p-ink { background-color: rgba(63, 81, 181, 0.16); @@ -7227,11 +12516,11 @@ transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:not(.p-disabled).p-focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 4e799e5..01d1fb5 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #e02365; @@ -419,10 +643,6 @@ background: #e02365; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #007ad9; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #e02365; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f4f4f4; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #a6a6a6; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #212121; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ background: #e02365; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #cccccc; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #a80000; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #848484; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #848484; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1201,12 +2133,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #d6d6d6; + 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; @@ -1273,11 +2271,118 @@ border-color: #a80000; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #007ad9; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ background: #e02365; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #007ad9; @@ -1574,6 +2784,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #666666; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } .p-slider .p-slider-range { background: #007ad9; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: 2px solid #666666; border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #212121; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .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; @@ -1684,53 +3004,152 @@ background-color: #f4f4f4; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #007ad9; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; @@ -1755,12 +3175,12 @@ color: #007ad9; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #848484; border-color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } @@ -1782,12 +3202,12 @@ color: #007ad9; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #546E7A; color: #ffffff; border-color: #546E7A; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #B0BEC5; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #455A64; color: #ffffff; border-color: #455A64; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #005b9f; color: #ffffff; border-color: #005b9f; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #007ad9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34A835; border: 1px solid #34A835; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #107D11; color: #ffffff; border-color: #107D11; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #aae5aa; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #0C6B0D; color: #ffffff; border-color: #0C6B0D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #34A835; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34A835; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34A835; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ED990B; color: #333333; border-color: #ED990B; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffeab4; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #D38B10; color: #333333; border-color: #D38B10; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffba01; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8E24AA; color: #ffffff; border-color: #8E24AA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7B1FA2; color: #ffffff; border-color: #7B1FA2; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c01120; color: #ffffff; border-color: #c01120; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f9b4ba; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #a90000; color: #ffffff; border-color: #a90000; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #e91224; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #005b9f; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #005b9f; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #324249; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #222c31; @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - border-color: transparent; - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(0, 122, 217, 0.16); - border-color: transparent; - color: #007ad9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - border-color: transparent; - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 168, 53, 0.16); - border-color: transparent; - color: #34A835; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - border-color: transparent; - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 186, 1, 0.16); - border-color: transparent; - color: #ffba01; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #e91224; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - color: #e91224; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - color: #e91224; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #e91224; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - border-color: transparent; - color: #e91224; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - border-color: transparent; - color: #e91224; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f9f9f9; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #007ad9; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #007ad9; @@ -2951,6 +4546,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #e02365; @@ -2998,31 +4599,76 @@ padding: 0.571rem 1rem; } + .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.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-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3053,6 +4709,59 @@ background: #eaeaea; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3174,31 +4924,72 @@ color: #333333; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3229,6 +5030,117 @@ background: #eaeaea; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #007ad9; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #007ad9; @@ -3548,6 +5730,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3615,6 +5798,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3638,6 +5840,7 @@ color: #ffffff; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3659,6 +5862,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3667,7 +5926,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #c8c8c8; + border-top: 1px solid #c8c8c8; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3677,12 +5936,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #c8c8c8; + border-left: 1px solid #c8c8c8; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #007ad9; padding: 0.857rem 1rem; @@ -3702,6 +5981,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #007ad9; @@ -3737,10 +6017,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3748,6 +6085,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3761,6 +6158,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3771,6 +6169,244 @@ background: #d8dae2; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3791,6 +6427,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3813,6 +6450,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3828,6 +6466,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #007ad9; border: 1px solid #007ad9; @@ -3839,6 +6497,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3861,12 +6589,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -3887,6 +6615,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3912,6 +6777,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3941,14 +6807,12 @@ background: #ffffff; color: #333333; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3956,6 +6820,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3982,12 +6916,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -3998,6 +6932,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4007,6 +7094,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4016,6 +7107,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4036,6 +7128,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4056,6 +7203,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #007ad9; padding: 0.857rem 1rem; @@ -4120,6 +7311,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4129,6 +7352,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4152,6 +7376,48 @@ color: #333333; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4159,7 +7425,7 @@ border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4171,6 +7437,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4206,7 +7481,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4214,6 +7489,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4236,6 +7521,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4284,27 +7675,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4315,6 +7865,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4350,7 +7909,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4358,6 +7917,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4373,6 +7942,7 @@ color: #333333; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4385,14 +7955,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4425,6 +7995,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #333333; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #d8dae2; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4432,7 +8072,16 @@ color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4469,7 +8118,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4477,6 +8126,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4506,6 +8165,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4546,6 +8311,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4581,7 +8355,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4589,6 +8363,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4604,7 +8388,8 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #d8dae2; @@ -4613,95 +8398,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4711,6 +8500,7 @@ background: #007ad9; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #ffffff; @@ -4760,6 +8550,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4795,7 +8594,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .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; @@ -4803,6 +8602,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4827,11 +8636,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; @@ -4872,6 +8735,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4892,6 +8795,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4912,13 +8816,62 @@ color: #ffffff; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4933,6 +8886,16 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4969,7 +8932,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4977,6 +8940,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4999,6 +8972,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5051,6 +9044,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5064,6 +9106,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5134,6 +9177,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5168,6 +9284,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5218,6 +9335,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5319,6 +9720,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5329,6 +9733,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5375,6 +9853,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5400,6 +9917,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5442,6 +9992,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5466,6 +10054,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5476,10 +10065,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; @@ -5491,6 +10099,210 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5507,6 +10319,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5552,6 +10390,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5574,6 +10473,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5582,6 +10513,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5607,14 +10554,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 864269b..37fcef7 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #007ad9; @@ -419,10 +643,6 @@ background: #007ad9; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #007ad9; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #007ad9; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f4f4f4; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #a6a6a6; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #212121; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #005b9f; } @@ -806,6 +1324,52 @@ border-color: #ffffff; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #007ad9; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #cccccc; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #a80000; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #848484; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #848484; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #d6d6d6; + 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; @@ -1277,11 +2275,118 @@ border-color: #a80000; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #007ad9; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #007ad9; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #007ad9; @@ -1586,6 +2796,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #666666; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } .p-slider .p-slider-range { background: #007ad9; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: 2px solid #666666; border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #212121; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .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; @@ -1696,53 +3016,152 @@ background-color: #f4f4f4; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #007ad9; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; @@ -1767,12 +3187,12 @@ color: #007ad9; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #848484; border-color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } @@ -1794,12 +3214,12 @@ color: #007ad9; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #546E7A; color: #ffffff; border-color: #546E7A; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #B0BEC5; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #455A64; color: #ffffff; border-color: #455A64; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #005b9f; color: #ffffff; border-color: #005b9f; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #007ad9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34A835; border: 1px solid #34A835; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #107D11; color: #ffffff; border-color: #107D11; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #aae5aa; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #0C6B0D; color: #ffffff; border-color: #0C6B0D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #34A835; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34A835; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34A835; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ED990B; color: #333333; border-color: #ED990B; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffeab4; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #D38B10; color: #333333; border-color: #D38B10; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffba01; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8E24AA; color: #ffffff; border-color: #8E24AA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7B1FA2; color: #ffffff; border-color: #7B1FA2; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c01120; color: #ffffff; border-color: #c01120; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f9b4ba; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #a90000; color: #ffffff; border-color: #a90000; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #e91224; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #005b9f; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #005b9f; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #324249; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #222c31; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - border-color: transparent; - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(0, 122, 217, 0.16); - border-color: transparent; - color: #007ad9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - border-color: transparent; - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 168, 53, 0.16); - border-color: transparent; - color: #34A835; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - border-color: transparent; - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 186, 1, 0.16); - border-color: transparent; - color: #ffba01; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #e91224; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - color: #e91224; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - color: #e91224; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #e91224; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - border-color: transparent; - color: #e91224; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - border-color: transparent; - color: #e91224; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f9f9f9; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #007ad9; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #007ad9; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #007ad9; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3065,6 +4721,59 @@ background: #eaeaea; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3186,31 +4936,72 @@ color: #333333; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3241,6 +5042,117 @@ background: #eaeaea; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #007ad9; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #333333; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3650,6 +5852,7 @@ color: #ffffff; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #c8c8c8; + border-top: 1px solid #c8c8c8; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #c8c8c8; + border-left: 1px solid #c8c8c8; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #333333; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #007ad9; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #d8dae2; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #333333; border: 1px solid #333333; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #ffffff; color: #333333; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3994,12 +6928,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -4010,6 +6944,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4068,6 +7215,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #333333; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4141,6 +7364,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #333333; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4171,7 +7437,7 @@ border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #333333; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #333333; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #d8dae2; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #d8dae2; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #333333; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #ffffff; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #ffffff; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4945,6 +8898,16 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5619,14 +10566,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index b551f96..bea76a7 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #41b883; @@ -419,10 +643,6 @@ background: #41b883; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #41b883; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -652,16 +1038,102 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } - @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { - padding: 0.25rem; - } + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; border-color: #41b883; } + .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; @@ -713,6 +1194,12 @@ 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: #41b883; @@ -721,10 +1208,6 @@ background: #41b883; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f4f4f4; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #a6a6a6; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #41b883; background: #41b883; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #212121; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + border-color: #246749; + background: #246749; + 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 #c2e9d8; border-color: #41b883; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #246749; - background: #246749; - color: #ffffff; - } .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: #41b883; + } + .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: #246749; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #41b883; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #246749; } @@ -806,6 +1324,52 @@ border-color: #ffffff; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; border-color: #41b883; } + .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; } @@ -945,6 +1626,12 @@ 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: #41b883; @@ -953,13 +1640,14 @@ background: #41b883; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #41b883; + } + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #cccccc; transform: translateX(1.25rem); } - .p-inputswitch.p-focus .p-inputswitch-slider { + .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: #318c63; + } + .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 #c2e9d8; } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #41b883; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #cccccc; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #318c63; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #a80000; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #848484; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #848484; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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: #41b883; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #d6d6d6; + 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; @@ -1277,11 +2275,118 @@ border-color: #a80000; } + .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; @@ -1292,6 +2397,15 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; border-color: #41b883; } + .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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #41b883; @@ -1382,6 +2497,12 @@ 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: #41b883; @@ -1390,10 +2511,6 @@ background: #41b883; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c2e9d8; - border-color: #41b883; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #41b883; background: #41b883; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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: #246749; background: #246749; - color: #ffffff; + } + .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 #c2e9d8; + border-color: #41b883; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #41b883; + } + .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: #246749; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #41b883; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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: #246749; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; - border-color: #41b883; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #41b883; @@ -1586,6 +2796,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #666666; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; } .p-slider .p-slider-range { background: #41b883; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: 2px solid #666666; border-color: #41b883; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #212121; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; border-color: #41b883; } + .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; @@ -1696,53 +3016,152 @@ background-color: #f4f4f4; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .p-togglebutton.p-highlight .p-button { + background: #41b883; + border-color: #41b883; + 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: #318c63; + border-color: #318c63; + 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 #c2e9d8; border-color: #41b883; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { - background: #41b883; - border-color: #41b883; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #318c63; - border-color: #318c63; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #41b883; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #318c63; color: #ffffff; border-color: #318c63; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #246749; color: #ffffff; border-color: #246749; @@ -1767,12 +3187,12 @@ color: #41b883; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .p-button.p-button-outlined:not(:disabled):hover { background: rgba(65, 184, 131, 0.04); color: #41b883; border: 1px solid; } - .p-button.p-button-outlined:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(65, 184, 131, 0.16); color: #41b883; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #848484; border-color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } @@ -1794,12 +3214,12 @@ color: #41b883; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .p-button.p-button-text:not(:disabled):hover { background: rgba(65, 184, 131, 0.04); color: #41b883; border-color: transparent; } - .p-button.p-button-text:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(65, 184, 131, 0.16); color: #41b883; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #546E7A; color: #ffffff; border-color: #546E7A; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #B0BEC5; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #455A64; color: #ffffff; border-color: #455A64; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #005b9f; color: #ffffff; border-color: #005b9f; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #007ad9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34A835; border: 1px solid #34A835; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #107D11; color: #ffffff; border-color: #107D11; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #aae5aa; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #0C6B0D; color: #ffffff; border-color: #0C6B0D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #34A835; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34A835; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34A835; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ED990B; color: #333333; border-color: #ED990B; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffeab4; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #D38B10; color: #333333; border-color: #D38B10; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffba01; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8E24AA; color: #ffffff; border-color: #8E24AA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7B1FA2; color: #ffffff; border-color: #7B1FA2; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c01120; color: #ffffff; border-color: #c01120; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f9b4ba; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #a90000; color: #ffffff; border-color: #a90000; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #e91224; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #246749; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .p-button.p-button-link:not(:disabled):focus { background: transparent; box-shadow: 0 0 0 0.2rem #c2e9d8; border-color: transparent; } - .p-button.p-button-link:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #246749; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #324249; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #222c31; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .p-splitbutton { border-radius: 3px; } - .p-splitbutton.p-button-outlined > .p-button { - background-color: transparent; - color: #41b883; - border: 1px solid; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(65, 184, 131, 0.04); - color: #41b883; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(65, 184, 131, 0.16); - color: #41b883; - } - .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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #d2d2d2; - color: #848484; - } - .p-splitbutton.p-button-text > .p-button { - background-color: transparent; - color: #41b883; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(65, 184, 131, 0.04); - color: #41b883; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(65, 184, 131, 0.16); - color: #41b883; - 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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - border-color: transparent; - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(0, 122, 217, 0.16); - border-color: transparent; - color: #007ad9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - border-color: transparent; - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 168, 53, 0.16); - border-color: transparent; - color: #34A835; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - border-color: transparent; - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 186, 1, 0.16); - border-color: transparent; - color: #ffba01; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #e91224; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - color: #e91224; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - color: #e91224; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #e91224; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - border-color: transparent; - color: #e91224; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - border-color: transparent; - color: #e91224; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ background: #41b883; color: #ffffff; } + .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { + outline: 0.15rem solid #c2e9d8; + outline-offset: -0.15rem; + } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #41b883; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f9f9f9; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { background: #41b883; color: #ffffff; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #41b883; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #41b883; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #41b883; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; + border-color: #41b883; + } + .p-orderlist .p-orderlist-header { + color: #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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3065,6 +4721,59 @@ background: #eaeaea; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3186,31 +4936,72 @@ color: #333333; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; + border-color: #41b883; + } + .p-picklist .p-picklist-header { + color: #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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3241,6 +5042,117 @@ background: #eaeaea; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #41b883; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3650,6 +5852,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #c8c8c8; + border-top: 1px solid #c8c8c8; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #c8c8c8; + border-left: 1px solid #c8c8c8; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #41b883; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #d8dae2; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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 #c2e9d8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #41b883; + 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 #c2e9d8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #41b883; + } + .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: #41b883; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } + + .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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #ffffff; color: #333333; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3994,12 +6928,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -4010,6 +6944,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4068,6 +7215,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #246749; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4141,6 +7364,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #333333; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4171,7 +7437,7 @@ border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #333333; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #333333; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #d8dae2; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #d8dae2; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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 #c2e9d8; - } - .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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 #c2e9d8; + } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #f4f4f4; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #333333; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #ffffff; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4945,6 +8898,16 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #41b883; color: #ffffff; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.2rem #c2e9d8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #41b883; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #41b883; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #41b883; color: #ffffff; @@ -5619,14 +10566,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 95b7ca8..9dc2861 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #ffffff; background: #007ad9; @@ -419,10 +643,6 @@ background: #007ad9; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #ffffff; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #007ad9; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #eaeaea; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #007ad9; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f4f4f4; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #a6a6a6; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,38 +1273,50 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #212121; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #005b9f; } @@ -806,6 +1324,52 @@ border-color: #ffffff; } + .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; } @@ -817,6 +1381,7 @@ } .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; @@ -847,6 +1412,14 @@ border-color: #a80000; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -865,11 +1438,107 @@ 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; @@ -880,6 +1549,18 @@ 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; } @@ -945,6 +1626,12 @@ 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; @@ -953,13 +1640,14 @@ background: #007ad9; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -973,17 +1661,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1056,18 +1824,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1078,30 +2010,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #cccccc; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1113,6 +2047,7 @@ 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; @@ -1126,6 +2061,15 @@ .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; @@ -1145,27 +2089,15 @@ color: #a80000; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #848484; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #848484; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1205,12 +2137,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1240,6 +2228,12 @@ 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; @@ -1261,12 +2255,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; - background: #d6d6d6; + 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; @@ -1277,11 +2275,118 @@ border-color: #a80000; } + .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; @@ -1292,6 +2397,15 @@ 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; @@ -1359,6 +2473,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #007ad9; @@ -1382,6 +2497,12 @@ 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; @@ -1390,10 +2511,6 @@ background: #007ad9; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #333333; - background: #d6d6d6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } @@ -1413,14 +2530,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .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-invalid.p-component > .p-inputtext { @@ -1449,10 +2583,55 @@ 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; @@ -1461,15 +2640,7 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1477,32 +2648,52 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; } @@ -1510,9 +2701,29 @@ 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; @@ -1529,7 +2740,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #007ad9; @@ -1586,6 +2796,44 @@ border-color: #a80000; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1612,25 +2860,88 @@ border: 2px solid #666666; border-radius: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } .p-slider .p-slider-range { background: #007ad9; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: 2px solid #666666; border-color: #007ad9; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #212121; @@ -1641,6 +2952,15 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .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; @@ -1696,53 +3016,152 @@ background-color: #f4f4f4; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #116fbf; - border-color: #116fbf; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #007ad9; @@ -1751,13 +3170,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; @@ -1767,12 +3187,12 @@ color: #007ad9; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; @@ -1781,11 +3201,11 @@ color: #848484; border-color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } @@ -1794,12 +3214,12 @@ color: #007ad9; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border-color: transparent; @@ -1807,15 +3227,15 @@ .p-button.p-button-text.p-button-plain { color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #eaeaea; color: #848484; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #d2d2d2; color: #848484; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1888,302 +3308,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #546E7A; color: #ffffff; border-color: #546E7A; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #B0BEC5; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #455A64; color: #ffffff; border-color: #455A64; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #116fbf; color: #ffffff; border-color: #116fbf; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #005b9f; color: #ffffff; border-color: #005b9f; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #007ad9; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34A835; border: 1px solid #34A835; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #107D11; color: #ffffff; border-color: #107D11; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #aae5aa; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #0C6B0D; color: #ffffff; border-color: #0C6B0D; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); color: #34A835; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #34A835; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34A835; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34A835; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ED990B; color: #333333; border-color: #ED990B; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffeab4; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #D38B10; color: #333333; border-color: #D38B10; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffba01; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8E24AA; color: #ffffff; border-color: #8E24AA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #CE93D8; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7B1FA2; color: #ffffff; border-color: #7B1FA2; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c01120; color: #ffffff; border-color: #c01120; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f9b4ba; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #a90000; color: #ffffff; border-color: #a90000; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #e91224; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; @@ -2194,25 +3614,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #005b9f; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #005b9f; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2240,6 +3737,8 @@ height: 3rem; background: #324249; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #222c31; @@ -2292,263 +3791,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #eaeaea; - color: #848484; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(0, 122, 217, 0.04); - border-color: transparent; - color: #007ad9; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(0, 122, 217, 0.16); - border-color: transparent; - color: #007ad9; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(52, 168, 53, 0.04); - border-color: transparent; - color: #34A835; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(52, 168, 53, 0.16); - border-color: transparent; - color: #34A835; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 186, 1, 0.04); - border-color: transparent; - color: #ffba01; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 186, 1, 0.16); - border-color: transparent; - color: #ffba01; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #e91224; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - color: #e91224; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - color: #e91224; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #e91224; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 18, 36, 0.04); - border-color: transparent; - color: #e91224; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 18, 36, 0.16); - border-color: transparent; - color: #e91224; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2560,6 +3916,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2596,6 +3953,241 @@ color: #ffffff; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2699,6 +4291,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2730,6 +4323,10 @@ 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; } @@ -2809,17 +4406,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f9f9f9; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #ffffff; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2875,10 +4472,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -2903,6 +4496,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #007ad9; @@ -2931,6 +4525,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #007ad9; @@ -2963,6 +4558,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #ffffff; background: #007ad9; @@ -3010,31 +4611,76 @@ padding: 0.571rem 1rem; } + .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.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-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; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } + .p-orderlist .p-orderlist-header { + color: #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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3043,13 +4689,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; @@ -3065,6 +4721,59 @@ background: #eaeaea; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3097,6 +4806,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3104,6 +4814,46 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3186,31 +4936,72 @@ color: #333333; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #c8c8c8; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } + .p-picklist .p-picklist-header { + color: #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-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:not(:first-child) { + border-top: 1px solid #c8c8c8; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3219,13 +5010,23 @@ background: transparent; transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #eaeaea; color: #333333; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #333333; + background: #eaeaea; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; @@ -3241,6 +5042,117 @@ background: #eaeaea; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3266,6 +5178,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3296,6 +5290,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #007ad9; @@ -3314,7 +5309,7 @@ .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 { + .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 { @@ -3355,6 +5350,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3447,6 +5611,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3462,7 +5627,7 @@ .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 { + .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 { @@ -3552,6 +5717,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3560,6 +5742,7 @@ font-weight: 700; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3627,6 +5810,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -3650,6 +5852,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3671,6 +5874,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3679,7 +5938,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #c8c8c8; + border-top: 1px solid #c8c8c8; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3689,12 +5948,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #c8c8c8; + border-left: 1px solid #c8c8c8; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -3714,6 +5993,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #007ad9; @@ -3749,10 +6029,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3760,6 +6097,66 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -3773,6 +6170,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3783,6 +6181,244 @@ background: #d8dae2; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3803,6 +6439,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3825,6 +6462,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3840,6 +6478,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -3851,6 +6509,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -3873,12 +6601,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -3899,6 +6627,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3924,6 +6789,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3953,14 +6819,12 @@ background: #ffffff; color: #333333; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3968,6 +6832,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -3994,12 +6928,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(200, 200, 200, 0); border-bottom-color: #bebebe; } @@ -4010,6 +6944,159 @@ border-top-color: #c8c8c8; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #333333; @@ -4019,6 +7106,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4028,6 +7119,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4048,6 +7140,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4068,6 +7215,50 @@ border-bottom-color: #333333; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4132,6 +7323,38 @@ border-color: #005b9f; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4141,6 +7364,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4164,6 +7388,48 @@ color: #333333; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4171,7 +7437,7 @@ border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4183,6 +7449,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 3px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4218,7 +7493,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4226,6 +7501,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4248,6 +7533,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4296,27 +7687,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4327,6 +7877,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4362,7 +7921,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4370,6 +7929,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4385,6 +7954,7 @@ color: #333333; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4397,14 +7967,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4437,6 +8007,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #333333; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #333333; + background: #eaeaea; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #d8dae2; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4444,7 +8084,16 @@ color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4481,7 +8130,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4489,6 +8138,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4518,6 +8177,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4558,6 +8323,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4593,7 +8367,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4601,6 +8375,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4616,7 +8400,8 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #d8dae2; @@ -4625,95 +8410,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4723,6 +8512,7 @@ background: #f4f4f4; border-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #333333; @@ -4772,6 +8562,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #333333; transition: background-color 0.2s, box-shadow 0.2s; @@ -4807,7 +8606,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .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; @@ -4815,6 +8614,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4839,11 +8648,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; @@ -4884,6 +8747,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4904,6 +8807,7 @@ border-top-left-radius: 3px; transition: background-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4924,13 +8828,62 @@ color: #ffffff; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #333333; border: 1px solid #c8c8c8; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4945,6 +8898,16 @@ background: #ffffff; border: 1px solid #c8c8c8; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 3px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #333333; @@ -4981,7 +8944,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #333333; - background: #d6d6d6; + background: #eaeaea; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #333333; @@ -4989,6 +8952,16 @@ .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-focus > .p-menuitem-content:hover { + color: #333333; + background: #eaeaea; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #333333; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -5011,6 +8984,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5063,6 +9056,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5076,6 +9118,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5146,6 +9189,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5180,6 +9296,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5230,6 +9347,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5331,6 +9732,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5341,6 +9745,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5387,6 +9865,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5412,6 +9929,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #007ad9; color: #ffffff; @@ -5454,6 +10004,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5478,6 +10066,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5488,10 +10077,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #eaeaea; @@ -5503,6 +10111,210 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5519,6 +10331,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5564,6 +10402,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5586,6 +10485,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -5594,6 +10525,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #007ad9; color: #ffffff; @@ -5619,14 +10566,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #333333; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index c867e04..a1f24cf 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 2px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.429rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.2145rem 0.429rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.2145rem 0; @@ -411,6 +629,12 @@ 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:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #385048; background: #AFD3C8; @@ -419,10 +643,6 @@ background: #aed3c7; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #666666; - background: #e0e0e0; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; background: #f4f4f4; } @@ -434,6 +654,156 @@ font-weight: 700; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #385048; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #666666; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0.25rem; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f4f4f4; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f4; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f4; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #aed3c7; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #666666; - background: #e0e0e0; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; background: #f4f4f4; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f4f4f4; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 1px solid #dadada; + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border: 1px solid #dadada; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #7B95A3; background: #7B95A3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #a6a6a6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #617c8a; - background: #617c8a; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #7B95A3; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #e7a3a3; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ background: #aed3c7; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #666666; - background: #e0e0e0; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 1.858rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #d8dae2; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #AFD3C8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #385048; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #AFD3C8; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e7a3a3; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #e7a3a3; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.429rem; - color: #a6a6a6; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 1.858rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.429rem; - color: #a6a6a6; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 1.858rem; } @@ -1201,12 +2133,68 @@ padding: 0.53625rem 0.53625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; - background: #e0e0e0; + 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; @@ -1273,11 +2271,118 @@ border-color: #e7a3a3; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #666666; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ background: #aed3c7; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #666666; - background: #e0e0e0; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; background: #f4f4f4; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #666666; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #a6a6a6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - border-color: #7B95A3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #7B95A3; background: #7B95A3; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #7B95A3; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; - border-color: #7B95A3; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #7B95A3; @@ -1574,6 +2784,44 @@ border-color: #e7a3a3; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #c4c4c4; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #7f7f7f; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } .p-slider .p-slider-range { background: #7B95A3; + border-radius: 2px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: 2px solid #7f7f7f; border-color: #7B95A3; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #a6a6a6; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7B95A3; } + .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; @@ -1684,53 +3004,152 @@ background-color: #f4f4f4; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #666666; - } - .p-togglebutton.p-button.p-highlight { - background: #AFD3C8; - border-color: #AFD3C8; - color: #385048; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #385048; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #8DC8B5; - border-color: #8DC8B5; - color: #385048; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #385048; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #e7a3a3; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #7B95A3; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #6c8999; color: #ffffff; border-color: #6c8999; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #617c8a; color: #ffffff; border-color: #617c8a; @@ -1755,12 +3175,12 @@ color: #7B95A3; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(123, 149, 163, 0.16); color: #7B95A3; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #a6a6a6; border-color: #a6a6a6; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f4f4f4; color: #a6a6a6; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dbdbdb; color: #a6a6a6; } @@ -1782,12 +3202,12 @@ color: #7B95A3; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(123, 149, 163, 0.16); color: #7B95A3; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #a6a6a6; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f4f4f4; color: #a6a6a6; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dbdbdb; color: #a6a6a6; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #a3897b; border: 1px solid #8e6f5f; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #8e6f5f; color: #ffffff; border-color: #7a5743; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #bfaaa0; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #7a5743; color: #ffffff; border-color: #6e4e3c; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #a3897b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(163, 137, 123, 0.04); color: #a3897b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(163, 137, 123, 0.16); color: #a3897b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #a3897b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(163, 137, 123, 0.04); border-color: transparent; color: #a3897b; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(163, 137, 123, 0.16); border-color: transparent; color: #a3897b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #3D4447; background: #A3DEF8; border: 1px solid #79C8EB; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #81CBEC; color: #3D4447; border-color: #60B7DE; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #d2effc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #3ea9db; color: #3D4447; border-color: #2987B1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A3DEF8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(163, 222, 248, 0.04); color: #A3DEF8; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(163, 222, 248, 0.16); color: #A3DEF8; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #A3DEF8; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(163, 222, 248, 0.04); border-color: transparent; color: #A3DEF8; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(163, 222, 248, 0.16); border-color: transparent; color: #A3DEF8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #323E39; background: #A3E2C6; border: 1px solid #80CAAA; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #80CAAA; color: #323E39; border-color: #5EA285; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #caeede; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #31B57C; color: #323E39; border-color: #5EA285; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A3E2C6; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(163, 226, 198, 0.04); color: #A3E2C6; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(163, 226, 198, 0.16); color: #A3E2C6; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #A3E2C6; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(163, 226, 198, 0.04); border-color: transparent; color: #A3E2C6; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(163, 226, 198, 0.16); border-color: transparent; color: #A3E2C6; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffe38e; border: 1px solid #ffd95e; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd95e; color: #333333; border-color: #ffce3c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffce3c; color: #333333; border-color: #ffc62a; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #ffe38e; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 227, 142, 0.04); color: #ffe38e; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 227, 142, 0.16); color: #ffe38e; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #ffe38e; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 227, 142, 0.04); border-color: transparent; color: #ffe38e; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 227, 142, 0.16); border-color: transparent; color: #ffe38e; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #333333; background: #e9bef1; border: 1px solid #de9eea; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #de9eea; color: #333333; border-color: #d37de3; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f0d3f6; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #d37de3; color: #333333; border-color: #c85ddc; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #e9bef1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(233, 190, 241, 0.04); color: #e9bef1; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(233, 190, 241, 0.16); color: #e9bef1; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #e9bef1; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(233, 190, 241, 0.04); border-color: transparent; color: #e9bef1; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(233, 190, 241, 0.16); border-color: transparent; color: #e9bef1; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #262222; background: #F4B6B6; border: 1px solid #E38787; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #EF9999; color: #262222; border-color: #CB5858; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fbe2e2; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #EB5656; color: #262222; border-color: #B73737; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F4B6B6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 182, 182, 0.04); color: #F4B6B6; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 182, 182, 0.16); color: #F4B6B6; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F4B6B6; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 182, 182, 0.04); border-color: transparent; color: #F4B6B6; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 182, 182, 0.16); border-color: transparent; color: #F4B6B6; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #617c8a; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #617c8a; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #324249; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #222c31; @@ -2280,263 +3779,120 @@ border-radius: 2px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(123, 149, 163, 0.04); - color: #7B95A3; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f4f4f4; - color: #a6a6a6; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(123, 149, 163, 0.04); - color: #7B95A3; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f4f4f4; - color: #a6a6a6; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #a3897b; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 137, 123, 0.04); - color: #a3897b; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 137, 123, 0.04); - border-color: transparent; - color: #a3897b; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(163, 137, 123, 0.16); - border-color: transparent; - color: #a3897b; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 222, 248, 0.04); - color: #A3DEF8; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 222, 248, 0.04); - border-color: transparent; - color: #A3DEF8; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(163, 222, 248, 0.16); - border-color: transparent; - color: #A3DEF8; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 226, 198, 0.04); - color: #A3E2C6; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(163, 226, 198, 0.04); - border-color: transparent; - color: #A3E2C6; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(163, 226, 198, 0.16); - border-color: transparent; - color: #A3E2C6; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 227, 142, 0.04); - color: #ffe38e; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 227, 142, 0.04); - border-color: transparent; - color: #ffe38e; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 227, 142, 0.16); - border-color: transparent; - color: #ffe38e; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 190, 241, 0.04); - color: #e9bef1; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(233, 190, 241, 0.04); - border-color: transparent; - color: #e9bef1; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(233, 190, 241, 0.16); - border-color: transparent; - color: #e9bef1; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F4B6B6; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 182, 182, 0.04); - color: #F4B6B6; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 182, 182, 0.16); - color: #F4B6B6; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F4B6B6; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 182, 182, 0.04); - border-color: transparent; - color: #F4B6B6; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 182, 182, 0.16); - border-color: transparent; - color: #F4B6B6; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #385048; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #f8f8f8; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #385048; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dadada; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #666666; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #666666; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #666666; @@ -2951,6 +4546,12 @@ 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:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #385048; background: #AFD3C8; @@ -2998,31 +4599,76 @@ padding: 0.571rem 1rem; } + .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.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-controls { padding: 0.571rem 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } + .p-orderlist .p-orderlist-list-container { + background: #ffffff; + 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7B95A3; + } .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-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:not(:first-child) { + border-top: 1px solid #dadada; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3031,13 +4677,23 @@ 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:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f4f4f4; color: #666666; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #666666; + background: #f4f4f4; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #666666; - background: #e0e0e0; + background: #f4f4f4; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #385048; @@ -3053,6 +4709,59 @@ background: #f4f4f4; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f4; color: #666666; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #666666; @@ -3174,31 +4924,72 @@ color: #666666; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; + 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7B95A3; + } .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-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:not(:first-child) { + border-top: 1px solid #dadada; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; margin: 0; @@ -3207,13 +4998,23 @@ 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:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f4f4f4; color: #666666; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #666666; + background: #f4f4f4; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #666666; - background: #e0e0e0; + background: #f4f4f4; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #385048; @@ -3229,6 +5030,117 @@ background: #f4f4f4; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dadada; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #666666; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 0.71375rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #7B95A3; @@ -3548,6 +5730,7 @@ font-weight: 700; border-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3615,6 +5798,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dadada; background: #ffffff; @@ -3638,6 +5840,7 @@ color: #ffffff; border-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3659,6 +5862,62 @@ padding: 0.571rem 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3667,7 +5926,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dadada; + border-top: 1px solid #dadada; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3677,12 +5936,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dadada; + border-left: 1px solid #dadada; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #7B95A3; padding: 0.857rem 1rem; @@ -3702,6 +5981,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #666666; @@ -3737,10 +6017,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3748,6 +6085,66 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dadada; background: #ffffff; @@ -3761,6 +6158,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dadada; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3771,6 +6169,244 @@ background: #dadada; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3791,6 +6427,7 @@ border-top-left-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3813,6 +6450,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3828,6 +6466,26 @@ border-bottom-left-radius: 2px; } + .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; + } + .p-toolbar { background: #7B95A3; border: 1px solid #7B95A3; @@ -3839,6 +6497,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #666666; @@ -3861,12 +6589,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(241, 241, 241, 0); border-bottom-color: #e5e5e5; } @@ -3887,6 +6615,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .p-dialog { border-radius: 2px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3912,6 +6777,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3941,14 +6807,12 @@ background: #ffffff; color: #666666; padding: 0.571rem 1rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3956,6 +6820,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #666666; @@ -3982,12 +6916,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(241, 241, 241, 0); border-bottom-color: #e5e5e5; } @@ -3998,6 +6932,159 @@ border-top-color: #f1f1f1; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #666666; @@ -4007,6 +7094,10 @@ .p-sidebar .p-sidebar-header { padding: 0.857rem 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 700; + font-size: 1rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4016,6 +7107,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4036,6 +7128,61 @@ padding: 0.571rem 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #AFD3C8; color: #385048; @@ -4056,6 +7203,50 @@ border-bottom-color: #AFD3C8; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #7B95A3; padding: 0.857rem 1rem; @@ -4120,6 +7311,38 @@ border-color: #617c8a; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4129,6 +7352,7 @@ .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; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4152,6 +7376,48 @@ color: #666666; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4159,7 +7425,7 @@ border: 1px solid #eaeaea; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 2px; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4171,6 +7437,15 @@ box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 2px; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #666666; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4206,7 +7481,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #666666; @@ -4214,6 +7489,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #666666; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4236,6 +7521,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4284,27 +7675,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #ffffff; @@ -4315,6 +7865,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #666666; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4350,7 +7909,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #666666; @@ -4358,6 +7917,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #666666; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4373,6 +7942,7 @@ color: #666666; border: 1px solid #eaeaea; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 2px; } .p-megamenu .p-submenu-header { margin: 0; @@ -4385,14 +7955,14 @@ } .p-megamenu .p-submenu-list { padding: 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4425,6 +7995,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #666666; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #666666; + background: #eaeaea; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dadada; + margin: 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + + .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; + } .p-menu { padding: 0; @@ -4432,7 +8072,16 @@ color: #666666; border: 1px solid #c8c8c8; border-radius: 2px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #666666; @@ -4469,7 +8118,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #666666; @@ -4477,6 +8126,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #666666; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4506,6 +8165,112 @@ margin: 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4546,6 +8311,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #666666; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -4581,7 +8355,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #666666; @@ -4589,6 +8363,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #666666; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4604,7 +8388,8 @@ background: #ffffff; border: 1px solid #eaeaea; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 2px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dadada; @@ -4613,95 +8398,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.571rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 4.285rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.999rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 7.713rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 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-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.571rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 4.285rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.999rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 7.713rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 9.427rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4711,6 +8500,7 @@ background: #7B95A3; border-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #ffffff; @@ -4760,6 +8550,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .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; @@ -4795,7 +8594,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .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; @@ -4803,6 +8602,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4827,11 +8636,65 @@ margin-bottom: 2px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .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; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #a6a6a6; @@ -4872,6 +8735,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -4892,6 +8795,7 @@ border-top-left-radius: 2px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; margin: 0 0 -1px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4912,13 +8816,62 @@ color: #385048; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0; background: #ffffff; color: #666666; border: 1px solid #c8c8c8; border-radius: 2px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4933,6 +8886,16 @@ background: #ffffff; border: 1px solid #eaeaea; box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 2px; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #666666; @@ -4969,7 +8932,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #666666; - background: #e0e0e0; + background: #eaeaea; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #666666; @@ -4977,6 +8940,16 @@ .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-focus > .p-menuitem-content:hover { + color: #666666; + background: #eaeaea; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #666666; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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; @@ -4999,6 +8972,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5051,6 +9044,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5064,6 +9106,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5134,6 +9177,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5168,6 +9284,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5218,6 +9335,290 @@ color: #212121; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5319,6 +9720,9 @@ background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5329,6 +9733,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5375,6 +9853,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dadada; border-radius: 2px; @@ -5400,6 +9917,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #7B95A3; color: #ffffff; @@ -5442,6 +9992,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 2px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dadada; color: #666666; @@ -5466,6 +10054,7 @@ margin-left: 0.5rem; border-radius: 2px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5476,10 +10065,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f4f4f4; @@ -5491,6 +10099,210 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #efefef; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #7B95A3; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #7B95A3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 24px; @@ -5507,6 +10319,32 @@ line-height: 24px; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5552,6 +10390,67 @@ stroke: #212121; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5574,6 +10473,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #dadada; border-radius: 2px; @@ -5582,6 +10513,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #7B95A3; color: #ffffff; @@ -5607,14 +10554,39 @@ color: #262222; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #666666; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 625d8b5..ed2df52 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #495057; background: #E3F2FD; @@ -419,10 +643,6 @@ background: rgba(33, 150, 243, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #495057; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ 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: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #2196F3; background: #2196F3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #2196F3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0b7ad1; - background: #0b7ad1; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #2196F3; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ 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: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #2196F3; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #0d89ec; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #f44336; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: #6c757d; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: #6c757d; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #dee2e6; + 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; @@ -1273,11 +2271,118 @@ border-color: #f44336; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ 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: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #2196F3; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - border-color: #2196F3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #2196F3; background: #2196F3; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #2196F3; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; - border-color: #2196F3; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #2196F3; @@ -1574,6 +2784,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #2196F3; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } .p-slider .p-slider-range { background: #2196F3; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #2196F3; border-color: #2196F3; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #2196F3; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196F3; } + .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; @@ -1684,53 +3004,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #6c757d; - } - .p-togglebutton.p-button.p-highlight { - background: #2196F3; - border-color: #2196F3; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #0d89ec; - border-color: #0d89ec; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #2196F3; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #0d89ec; color: #ffffff; border-color: #0d89ec; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #0b7ad1; color: #ffffff; border-color: #0b7ad1; @@ -1755,12 +3175,12 @@ color: #2196F3; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196F3; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1782,12 +3202,12 @@ color: #2196F3; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196F3; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; border: 1px solid #0288D1; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #0288D1; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288D1; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288D1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 1px solid #689F38; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 1px solid #FBC02D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 1px solid #D32F2F; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #D32F2F; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #0b7ad1; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #0b7ad1; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #343a40; @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(33, 150, 243, 0.04); - color: #2196F3; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - border-color: transparent; - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(2, 136, 209, 0.16); - border-color: transparent; - color: #0288D1; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #fcfcfc; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #495057; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #495057; background: #E3F2FD; @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f8f9fa; - color: #495057; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196F3; + } + .p-orderlist .p-orderlist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; @@ -3053,6 +4709,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3174,31 +4924,72 @@ color: #495057; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196F3; + } + .p-picklist .p-picklist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; @@ -3229,6 +5030,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #2196F3; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3663,6 +5865,7 @@ color: #495057; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #ffffff; color: #495057; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4007,12 +6941,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4023,6 +6957,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4081,6 +7228,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #0b7ad1; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4239,6 +7514,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4383,6 +7942,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6c757d; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6c757d; + background: #e9ecef; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #495057; @@ -4494,7 +8143,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4502,6 +8151,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4614,6 +8388,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #f8f9fa; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #495057; @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4828,6 +8627,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #2196F3; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #495057; @@ -5018,7 +8981,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -5026,6 +8989,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #2196F3; color: #ffffff; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2196F3; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #2196F3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #2196F3; color: #ffffff; @@ -5656,14 +10603,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index f14adc5..267adde 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #495057; background: #E8F5E9; @@ -419,10 +643,6 @@ background: rgba(76, 175, 80, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #495057; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ 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: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4CAF50; background: #4CAF50; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #4CAF50; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3d8c40; - background: #3d8c40; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #4CAF50; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ 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: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #4CAF50; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #449e48; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #f44336; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: #6c757d; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: #6c757d; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #dee2e6; + 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; @@ -1273,11 +2271,118 @@ border-color: #f44336; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ 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: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #4CAF50; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - border-color: #4CAF50; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4CAF50; background: #4CAF50; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #4CAF50; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; - border-color: #4CAF50; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #4CAF50; @@ -1574,6 +2784,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #4CAF50; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } .p-slider .p-slider-range { background: #4CAF50; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #4CAF50; border-color: #4CAF50; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #4CAF50; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4CAF50; } + .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; @@ -1684,53 +3004,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #6c757d; - } - .p-togglebutton.p-button.p-highlight { - background: #4CAF50; - border-color: #4CAF50; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #449e48; - border-color: #449e48; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #4CAF50; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #449e48; color: #ffffff; border-color: #449e48; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #3d8c40; color: #ffffff; border-color: #3d8c40; @@ -1755,12 +3175,12 @@ color: #4CAF50; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1782,12 +3202,12 @@ color: #4CAF50; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; border: 1px solid #0288D1; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #0288D1; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288D1; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288D1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 1px solid #689F38; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 1px solid #FBC02D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 1px solid #D32F2F; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #D32F2F; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #3d8c40; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #3d8c40; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #343a40; @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - color: #4CAF50; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(76, 175, 80, 0.04); - color: #4CAF50; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - border-color: transparent; - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(2, 136, 209, 0.16); - border-color: transparent; - color: #0288D1; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #fcfcfc; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #495057; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #495057; background: #E8F5E9; @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f8f9fa; - color: #495057; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4CAF50; + } + .p-orderlist .p-orderlist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; @@ -3053,6 +4709,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3174,31 +4924,72 @@ color: #495057; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4CAF50; + } + .p-picklist .p-picklist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; @@ -3229,6 +5030,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #4CAF50; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3663,6 +5865,7 @@ color: #495057; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #ffffff; color: #495057; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4007,12 +6941,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4023,6 +6957,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4081,6 +7228,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #3d8c40; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4239,6 +7514,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4383,6 +7942,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6c757d; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6c757d; + background: #e9ecef; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #495057; @@ -4494,7 +8143,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4502,6 +8151,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4614,6 +8388,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #f8f9fa; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #495057; @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4828,6 +8627,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #4CAF50; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #495057; @@ -5018,7 +8981,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -5026,6 +8989,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #4CAF50; color: #ffffff; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4CAF50; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #4CAF50; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #4CAF50; color: #ffffff; @@ -5656,14 +10603,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 507bc91..d14852a 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #495057; background: #FFF3E0; @@ -419,10 +643,6 @@ background: #ebe0ce; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #495057; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ background: #ebe0ce; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #FFC107; background: #FFC107; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #FFC107; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #d29d00; - background: #d29d00; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #FFC107; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ background: #ebe0ce; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #FFC107; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #ecb100; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #f44336; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: #6c757d; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: #6c757d; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #dee2e6; + 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; @@ -1273,11 +2271,118 @@ border-color: #f44336; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ background: #ebe0ce; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #FFC107; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - border-color: #FFC107; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #FFC107; background: #FFC107; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #FFC107; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; - border-color: #FFC107; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #FFC107; @@ -1574,6 +2784,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #FFC107; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } .p-slider .p-slider-range { background: #FFC107; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #FFC107; border-color: #FFC107; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #FFC107; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #FFC107; } + .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; @@ -1684,53 +3004,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #6c757d; - } - .p-togglebutton.p-button.p-highlight { - background: #FFC107; - border-color: #FFC107; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #ecb100; - border-color: #ecb100; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #FFC107; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #ecb100; color: #212529; border-color: #ecb100; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #d29d00; color: #212529; border-color: #d29d00; @@ -1755,12 +3175,12 @@ color: #FFC107; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #FFC107; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1782,12 +3202,12 @@ color: #FFC107; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #FFC107; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; border: 1px solid #0288D1; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #0288D1; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288D1; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288D1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 1px solid #689F38; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 1px solid #FBC02D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 1px solid #D32F2F; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #D32F2F; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #d29d00; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #d29d00; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #343a40; @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - color: #FFC107; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 193, 7, 0.04); - color: #FFC107; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - border-color: transparent; - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(2, 136, 209, 0.16); - border-color: transparent; - color: #0288D1; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #fcfcfc; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #495057; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #495057; background: #FFF3E0; @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f8f9fa; - color: #495057; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #FFC107; + } + .p-orderlist .p-orderlist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; @@ -3053,6 +4709,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3174,31 +4924,72 @@ color: #495057; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #FFC107; + } + .p-picklist .p-picklist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; @@ -3229,6 +5030,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFC107; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3663,6 +5865,7 @@ color: #495057; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #ffffff; color: #495057; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4023,6 +6957,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4081,6 +7228,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #d29d00; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4239,6 +7514,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4383,6 +7942,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6c757d; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6c757d; + background: #e9ecef; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #495057; @@ -4494,7 +8143,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4502,6 +8151,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4614,6 +8388,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #f8f9fa; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #495057; @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4828,6 +8627,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #FFC107; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #495057; @@ -5018,7 +8981,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -5026,6 +8989,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFC107; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #FFC107; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #FFC107; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #FFC107; color: #212529; @@ -5656,14 +10603,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index f768d90..0d71a69 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #495057; background: #F3E5F5; @@ -419,10 +643,6 @@ background: rgba(156, 39, 176, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #495057; - background: #dee2e6; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #495057; @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #495057; @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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; @@ -721,10 +1208,6 @@ 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: #dee2e6; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9C27B0; background: #9C27B0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #9C27B0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #7d1f8d; - background: #7d1f8d; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9C27B0; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #f44336; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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; @@ -949,13 +1636,14 @@ 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: #dee2e6; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { 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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #9C27B0; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #8c239e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #f44336; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: #6c757d; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: #6c757d; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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; @@ -1257,12 +2251,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; - background: #dee2e6; + 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; @@ -1273,11 +2271,118 @@ border-color: #f44336; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #495057; @@ -1378,6 +2493,12 @@ 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; @@ -1386,10 +2507,6 @@ 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: #dee2e6; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #9C27B0; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - border-color: #9C27B0; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9C27B0; background: #9C27B0; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #9C27B0; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; - border-color: #9C27B0; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #9C27B0; @@ -1574,6 +2784,44 @@ border-color: #f44336; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #dee2e6; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #9C27B0; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } .p-slider .p-slider-range { background: #9C27B0; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #9C27B0; border-color: #9C27B0; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #9C27B0; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9C27B0; } + .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; @@ -1684,53 +3004,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #6c757d; - } - .p-togglebutton.p-button.p-highlight { - background: #9C27B0; - border-color: #9C27B0; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #8c239e; - border-color: #8c239e; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #9C27B0; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; @@ -1755,12 +3175,12 @@ color: #9C27B0; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; @@ -1769,11 +3189,11 @@ color: #6c757d; border-color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } @@ -1782,12 +3202,12 @@ color: #9C27B0; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #e9ecef; color: #6c757d; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #dee2e6; color: #6c757d; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607D8B; border: 1px solid #607D8B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); color: #607D8B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #607D8B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607D8B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607D8B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288D1; border: 1px solid #0288D1; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); color: #0288D1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #0288D1; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288D1; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288D1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689F38; border: 1px solid #689F38; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); color: #689F38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #689F38; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689F38; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689F38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #212529; background: #FBC02D; border: 1px solid #FBC02D; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); color: #FBC02D; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FBC02D; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #FBC02D; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #FBC02D; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9C27B0; border: 1px solid #9C27B0; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); color: #9C27B0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #9C27B0; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9C27B0; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9C27B0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #D32F2F; border: 1px solid #D32F2F; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); color: #D32F2F; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #D32F2F; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #D32F2F; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #D32F2F; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #7d1f8d; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #7d1f8d; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: #495057; color: #fff; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: #343a40; @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #607D8B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(96, 125, 139, 0.04); - border-color: transparent; - color: #607D8B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(96, 125, 139, 0.16); - border-color: transparent; - color: #607D8B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(2, 136, 209, 0.04); - border-color: transparent; - color: #0288D1; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(2, 136, 209, 0.16); - border-color: transparent; - color: #0288D1; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(104, 159, 56, 0.04); - border-color: transparent; - color: #689F38; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(104, 159, 56, 0.16); - border-color: transparent; - color: #689F38; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(251, 192, 45, 0.04); - border-color: transparent; - color: #FBC02D; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(251, 192, 45, 0.16); - border-color: transparent; - color: #FBC02D; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(156, 39, 176, 0.04); - border-color: transparent; - color: #9C27B0; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(156, 39, 176, 0.16); - border-color: transparent; - color: #9C27B0; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #D32F2F; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - color: #D32F2F; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - color: #D32F2F; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #D32F2F; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(211, 47, 47, 0.04); - border-color: transparent; - color: #D32F2F; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(211, 47, 47, 0.16); - border-color: transparent; - color: #D32F2F; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: #495057; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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; } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #fcfcfc; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #495057; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #495057; @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #495057; @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #495057; background: #F3E5F5; @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #f8f9fa; - color: #495057; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9C27B0; + } + .p-orderlist .p-orderlist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; @@ -3053,6 +4709,59 @@ background: #e9ecef; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3174,31 +4924,72 @@ color: #495057; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #dee2e6; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9C27B0; + } + .p-picklist .p-picklist-header { + color: #495057; padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #dee2e6; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #e9ecef; color: #495057; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #495057; + background: #e9ecef; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; @@ -3229,6 +5030,117 @@ background: #e9ecef; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #9C27B0; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #495057; @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -3663,6 +5865,7 @@ color: #495057; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #dee2e6; + border-top: 1px solid #dee2e6; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #dee2e6; + border-left: 1px solid #dee2e6; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #495057; @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #dee2e6; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #ffffff; color: #495057; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4007,12 +6941,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4023,6 +6957,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #495057; @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4081,6 +7228,50 @@ border-bottom-color: #495057; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #7d1f8d; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: #6c757d; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4239,6 +7514,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #f8f9fa; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4383,6 +7942,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #6c757d; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #6c757d; + background: #e9ecef; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #495057; @@ -4494,7 +8143,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4502,6 +8151,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -4614,6 +8388,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #dee2e6; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #f8f9fa; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #495057; @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #495057; transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .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; @@ -4828,6 +8627,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #9C27B0; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; color: #495057; border: 1px solid #dee2e6; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #495057; @@ -5018,7 +8981,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #495057; - background: #dee2e6; + background: #e9ecef; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #495057; @@ -5026,6 +8989,16 @@ .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-focus > .p-menuitem-content:hover { + color: #495057; + background: #e9ecef; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #495057; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #6c757d; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #495057; background: #e9ecef; @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #9C27B0; color: #ffffff; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #dee2e6; color: #495057; @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #e9ecef; @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 0.2rem #df9eea; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9C27B0; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #9C27B0; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #9C27B0; color: #ffffff; @@ -5656,14 +10603,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #495057; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index be43cae..cac4c08 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -306,6 +306,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -348,6 +468,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 0.375rem; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -380,6 +501,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +615,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.375rem 0.75rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -446,6 +664,12 @@ transition: none; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #312E81; background: #EEF2FF; @@ -454,10 +678,6 @@ background: #E0E7FF; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #18181B; - background: #e5e7eb; - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: #18181B; background: #f4f4f5; } @@ -469,6 +689,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } @@ -513,6 +883,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -563,6 +934,7 @@ border-radius: 50%; transition: none; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: #312E81; @@ -601,6 +973,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: #18181B; @@ -662,6 +1035,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f4f4f5; } @@ -670,6 +1050,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f5; } @@ -678,6 +1061,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f5; } @@ -687,16 +1073,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -707,6 +1179,15 @@ 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; @@ -748,6 +1229,12 @@ 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; @@ -756,10 +1243,6 @@ background: #E0E7FF; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #18181B; - background: #e5e7eb; - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: #18181B; background: #f4f4f5; } @@ -770,20 +1253,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #fafafa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #fafafa; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 16px; height: 16px; } + .p-checkbox .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; + border: 2px solid #d4d4d8; + border-radius: 0.375rem; + } .p-checkbox .p-checkbox-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -792,6 +1297,7 @@ color: #3f3f46; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,41 +1308,99 @@ width: 10px; height: 10px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4F46E5; background: #4F46E5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #d4d4d8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4F46E5; - background: #4F46E5; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #4F46E5; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -848,6 +1412,7 @@ } .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; @@ -878,6 +1443,14 @@ border-color: #f0a9a7; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -896,11 +1469,107 @@ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .p-dropdown { + 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; @@ -911,6 +1580,18 @@ 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; } @@ -976,6 +1657,12 @@ 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; @@ -984,13 +1671,14 @@ background: #E0E7FF; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #18181B; - background: #e5e7eb; - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: #18181B; background: #f4f4f5; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .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; @@ -1004,17 +1692,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #fafafa; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #fafafa; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + + .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%; } .p-inputgroup-addon { @@ -1087,18 +1855,182 @@ width: 3rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #fafafa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #fafafa; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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; @@ -1109,30 +2041,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: #bebec4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #4F46E5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #4338CA; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f0a9a7; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1144,6 +2078,7 @@ transition: none; appearance: none; border-radius: 0.375rem; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #d4d4d8; @@ -1157,6 +2092,15 @@ .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; @@ -1176,27 +2120,15 @@ color: #f0a9a7; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.75rem; - color: #71717A; - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.75rem; - color: #71717A; - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } @@ -1236,12 +2168,68 @@ padding: 0.9375rem 0.9375rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1271,6 +2259,12 @@ 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; @@ -1292,12 +2286,16 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: #18181B; - background: #e5e7eb; + 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; @@ -1308,11 +2306,118 @@ border-color: #f0a9a7; } + .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; @@ -1323,6 +2428,15 @@ 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; @@ -1390,6 +2504,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: #18181B; @@ -1413,6 +2528,12 @@ 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; @@ -1421,10 +2542,6 @@ background: #E0E7FF; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { - color: #18181B; - background: #e5e7eb; - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: #18181B; background: #f4f4f5; } @@ -1444,14 +2561,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #fafafa; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #fafafa; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; + + .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-invalid.p-component > .p-inputtext { @@ -1480,10 +2614,55 @@ 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; @@ -1492,15 +2671,7 @@ color: #3f3f46; border-radius: 50%; transition: none; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #d4d4d8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - border-color: #4F46E5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 6px; @@ -1508,38 +2679,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4F46E5; background: #4F46E5; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #fafafa; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #4F46E5; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1556,7 +2767,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; - border-color: #4F46E5; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #4F46E5; @@ -1609,6 +2819,44 @@ border-color: #f0a9a7; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1635,25 +2883,88 @@ border: 2px solid #4F46E5; border-radius: 50%; transition: none; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } .p-slider .p-slider-range { background: #4F46E5; + border-radius: 0.375rem; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #4F46E5; border-color: #4F46E5; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .p-treeselect { background: #ffffff; border: 1px solid #d4d4d8; transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #d4d4d8; @@ -1664,6 +2975,15 @@ box-shadow: 0 0 0 1px #6366F1; border-color: #4F46E5; } + .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; @@ -1719,53 +3039,152 @@ background-color: #ffffff; } - .p-togglebutton.p-button { + .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 { + .p-togglebutton .p-button .p-button-icon-left, +.p-togglebutton .p-button .p-button-icon-right { color: #71717A; } - .p-togglebutton.p-button:not(.p-disabled).p-focus { + .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-button:not(.p-disabled):not(.p-highlight):hover { - background: #f4f4f5; - border-color: #d4d4d8; - color: #3f3f46; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #71717A; - } - .p-togglebutton.p-button.p-highlight { - background: #4F46E5; - border-color: #4F46E5; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #4338CA; - border-color: #4338CA; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #f0a9a7; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #4F46E5; @@ -1774,13 +3193,14 @@ font-size: 1rem; transition: none; border-radius: 0.375rem; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #4338CA; color: #ffffff; border-color: #4338CA; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #4338CA; color: #ffffff; border-color: #4338CA; @@ -1790,12 +3210,12 @@ color: #4F46E5; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 70, 229, 0.16); color: #4F46E5; border: 1px solid; @@ -1804,11 +3224,11 @@ color: #71717A; border-color: #71717A; } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .p-button.p-button-outlined.p-button-plain:not(:disabled):hover { background: #f4f4f5; color: #71717A; } - .p-button.p-button-outlined.p-button-plain:enabled:active { + .p-button.p-button-outlined.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #71717A; } @@ -1817,12 +3237,12 @@ color: #4F46E5; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(79, 70, 229, 0.16); color: #4F46E5; border-color: transparent; @@ -1830,15 +3250,15 @@ .p-button.p-button-text.p-button-plain { color: #71717A; } - .p-button.p-button-text.p-button-plain:enabled:hover { + .p-button.p-button-text.p-button-plain:not(:disabled):hover { background: #f4f4f5; color: #71717A; } - .p-button.p-button-text.p-button-plain:enabled:active { + .p-button.p-button-text.p-button-plain:not(:disabled):active { background: #e5e7eb; color: #71717A; } - .p-button:focus { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; @@ -1911,302 +3331,302 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #c0c7d2; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #64748B; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #3B82F6; border: 1px solid #3B82F6; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #2563EB; color: #ffffff; border-color: #2563EB; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #b1cdfb; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #2563EB; color: #ffffff; border-color: #2563EB; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #3B82F6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(59, 130, 246, 0.04); color: #3B82F6; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(59, 130, 246, 0.16); color: #3B82F6; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #3B82F6; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(59, 130, 246, 0.04); border-color: transparent; color: #3B82F6; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(59, 130, 246, 0.16); border-color: transparent; color: #3B82F6; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #a0efbd; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #16A34A; color: #ffffff; border-color: #16A34A; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #22C55E; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #F59E0B; border: 1px solid #F59E0B; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #D97706; color: #ffffff; border-color: #D97706; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #fbd89d; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #D97706; color: #ffffff; border-color: #D97706; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F59E0B; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(245, 158, 11, 0.04); color: #F59E0B; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(245, 158, 11, 0.16); color: #F59E0B; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #F59E0B; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(245, 158, 11, 0.04); border-color: transparent; color: #F59E0B; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(245, 158, 11, 0.16); border-color: transparent; color: #F59E0B; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #dcbbfc; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #9333EA; color: #ffffff; border-color: #9333EA; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #A855F7; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 0.2rem #f9b4b4; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #DC2626; color: #ffffff; border-color: #DC2626; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #EF4444; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #EF4444; @@ -2217,25 +3637,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #4F46E5; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #4F46E5; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2263,6 +3760,8 @@ height: 3rem; background: #3f3f46; color: #fff; + outline-color: transparent; + transition: none; } .p-speeddial-action:hover { background: #27272A; @@ -2315,263 +3814,120 @@ border-radius: 0.375rem; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 70, 229, 0.04); - color: #4F46E5; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 70, 229, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f4f4f5; - color: #71717A; - } - .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(79, 70, 229, 0.04); - color: #4F46E5; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(79, 70, 229, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { - background: #f4f4f5; - color: #71717A; - } - .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { - background: #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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #64748B; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 116, 139, 0.04); - border-color: transparent; - color: #64748B; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(100, 116, 139, 0.16); - border-color: transparent; - color: #64748B; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - border-color: transparent; - color: #3B82F6; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - border-color: transparent; - color: #3B82F6; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(34, 197, 94, 0.04); - border-color: transparent; - color: #22C55E; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(34, 197, 94, 0.16); - border-color: transparent; - color: #22C55E; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - border-color: transparent; - color: #F59E0B; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - border-color: transparent; - color: #F59E0B; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - color: #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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(168, 85, 247, 0.04); - border-color: transparent; - color: #A855F7; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(168, 85, 247, 0.16); - border-color: transparent; - color: #A855F7; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #EF4444; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - color: #EF4444; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - color: #EF4444; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #EF4444; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(239, 68, 68, 0.04); - border-color: transparent; - color: #EF4444; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(239, 68, 68, 0.16); - border-color: transparent; - color: #EF4444; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2583,6 +3939,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2619,6 +3976,241 @@ color: #312E81; } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2722,6 +4314,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .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, @@ -2753,6 +4346,10 @@ 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; } @@ -2832,17 +4429,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #fcfcfc; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { color: #312E81; } .p-datatable.p-datatable-sm .p-datatable-header { @@ -2898,10 +4495,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f4f4f5; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #fafafa; color: #3f3f46; @@ -2926,6 +4519,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: #18181B; @@ -2954,6 +4548,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: #18181B; @@ -2986,6 +4581,12 @@ transition: none; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 0; + } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #312E81; background: #EEF2FF; @@ -3033,31 +4634,76 @@ padding: 1.25rem; } + .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.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-controls { padding: 1.25rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { - background: #fafafa; - color: #3f3f46; + .p-orderlist .p-orderlist-list-container { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; + border-color: #4F46E5; + } + .p-orderlist .p-orderlist-header { + color: #3f3f46; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; } .p-orderlist .p-orderlist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #3f3f46; padding: 0.25rem 0; - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; outline: 0 none; } + .p-orderlist .p-orderlist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1rem; margin: 0; @@ -3066,13 +4712,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { background: #f4f4f5; color: #18181B; } + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover.p-focus { + color: #18181B; + background: #f4f4f5; + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #312E81; @@ -3088,6 +4744,59 @@ background: #f4f4f5; } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f5; color: #18181B; @@ -3120,6 +4829,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3127,6 +4837,46 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #ffffff; color: #71717A; @@ -3209,31 +4959,72 @@ color: #3f3f46; } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .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; + .p-picklist .p-picklist-list-wrapper { + background: #ffffff; border: 1px solid #e5e7eb; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; + border-color: #4F46E5; + } + .p-picklist .p-picklist-header { + color: #3f3f46; padding: 1.25rem; font-weight: 700; - border-bottom: 0 none; - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; } .p-picklist .p-picklist-list { - border: 1px solid #e5e7eb; - background: #ffffff; color: #3f3f46; padding: 0.25rem 0; - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; outline: 0 none; } + .p-picklist .p-picklist-list:not(:first-child) { + border-top: 1px solid #e5e7eb; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1rem; margin: 0; @@ -3242,13 +5033,23 @@ background: transparent; transition: transform 0.2s, none; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { background: #f4f4f5; color: #18181B; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover.p-focus { + color: #18181B; + background: #f4f4f5; + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #312E81; @@ -3264,6 +5065,117 @@ background: #f4f4f5; } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #4F46E5; border-radius: 50%; @@ -3289,6 +5201,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3319,6 +5313,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: #18181B; @@ -3337,7 +5332,7 @@ .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 { + .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 { @@ -3378,6 +5373,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3470,6 +5634,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3485,7 +5650,7 @@ .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 { + .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 { @@ -3575,6 +5740,23 @@ padding: 0.9375rem 1.875rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3583,6 +5765,7 @@ font-weight: 700; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3675,6 +5858,25 @@ padding: 1.25rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -3698,6 +5900,7 @@ color: #3f3f46; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3719,6 +5922,62 @@ padding: 1.25rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3727,7 +5986,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #e5e7eb; + border-top: 1px solid #e5e7eb; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3737,12 +5996,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #e5e7eb; + border-left: 1px solid #e5e7eb; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -3762,6 +6041,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #18181B; @@ -3797,10 +6077,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; transition: none; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3808,6 +6145,66 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -3821,6 +6218,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #e5e7eb; transition: none; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3831,6 +6229,244 @@ background: #e5e7eb; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3851,6 +6487,7 @@ border-top-left-radius: 0.375rem; transition: none; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3873,6 +6510,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3888,6 +6526,26 @@ border-bottom-left-radius: 0.375rem; } + .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; + } + .p-toolbar { background: #fafafa; border: 1px solid #e5e7eb; @@ -3899,6 +6557,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #ffffff; color: #3f3f46; @@ -3921,12 +6649,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -3947,6 +6675,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3972,6 +6837,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -4001,14 +6867,12 @@ background: #ffffff; color: #3f3f46; padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } - .p-dialog .p-dialog-footer button { - margin: 0 0.5rem 0 0; - width: auto; - } .p-dialog.p-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -4016,6 +6880,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #ffffff; color: #3f3f46; @@ -4042,12 +6976,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(255, 255, 255, 0); border-bottom-color: #f2f2f2; } @@ -4058,6 +6992,159 @@ border-top-color: #ffffff; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #ffffff; color: #3f3f46; @@ -4067,6 +7154,10 @@ .p-sidebar .p-sidebar-header { padding: 1.25rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.5rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4076,6 +7167,7 @@ background: transparent; border-radius: 50%; transition: none; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4096,6 +7188,61 @@ padding: 1.25rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; @@ -4116,6 +7263,50 @@ border-bottom-color: #3f3f46; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #fafafa; padding: 1.25rem; @@ -4180,6 +7371,38 @@ border-color: #4338CA; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4189,6 +7412,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4212,6 +7436,48 @@ color: #71717A; } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4219,7 +7485,7 @@ border: 0 none; box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; - width: 12.5rem; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4231,6 +7497,15 @@ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } + .p-contextmenu .p-menuitem { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: #3f3f46; transition: none; @@ -4266,7 +7541,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #18181B; @@ -4274,6 +7549,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #18181B; + } + .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -4296,6 +7581,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4344,27 +7735,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 1rem; background: #fafafa; @@ -4375,6 +7925,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: #3f3f46; transition: none; @@ -4410,7 +7969,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #18181B; @@ -4418,6 +7977,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #18181B; + } + .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -4433,6 +8002,7 @@ color: #3f3f46; border: 0 none; box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-radius: 0.375rem; } .p-megamenu .p-submenu-header { margin: 0; @@ -4445,14 +8015,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4485,6 +8055,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 1rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button { + width: 2rem; + height: 2rem; + color: #71717A; + border-radius: 50%; + transition: none; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: #71717A; + background: #f4f4f5; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #f3f4f6; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4492,7 +8132,16 @@ color: #3f3f46; border: 1px solid #e5e7eb; border-radius: 0.375rem; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: #3f3f46; @@ -4529,7 +8178,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #18181B; @@ -4537,6 +8186,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #18181B; + } + .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -4566,6 +8225,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 1rem; background: #fafafa; @@ -4606,6 +8371,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: #3f3f46; transition: none; @@ -4641,7 +8415,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #18181B; @@ -4649,6 +8423,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #18181B; + } + .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -4664,7 +8448,8 @@ background: #ffffff; border: 0 none; box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - width: 12.5rem; + min-width: 12.5rem; + border-radius: 0.375rem; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #f3f4f6; @@ -4673,95 +8458,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: #71717A; - border-radius: 50%; - transition: none; - } - .p-menubar .p-menubar-button:hover { - color: #71717A; - background: #f4f4f5; - } - .p-menubar .p-menubar-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - } - .p-menubar .p-menubar-root-list { - position: absolute; - display: none; - padding: 0.25rem 0; - background: #ffffff; - border: 0 none; - box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - width: 100%; - } - .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid #f3f4f6; - margin: 0.25rem 0; - } - .p-menubar .p-menubar-root-list .p-submenu-icon { - font-size: 0.875rem; - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-menubar.p-menubar-mobile .p-menubar-button { + width: 2rem; + height: 2rem; + color: #71717A; + border-radius: 50%; + transition: none; + outline-color: transparent; } + .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 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + .p-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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4771,6 +8560,7 @@ background: #fafafa; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: #3f3f46; @@ -4820,6 +8610,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: #3f3f46; transition: none; @@ -4855,7 +8654,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .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; @@ -4863,6 +8662,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -4911,11 +8720,65 @@ border-bottom-left-radius: 0.375rem; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; border-radius: 0.375rem; background: #ffffff; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #3f3f46; @@ -4956,6 +8819,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -4976,6 +8879,7 @@ border-top-left-radius: 0.375rem; transition: none; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4996,13 +8900,62 @@ color: #4F46E5; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; color: #3f3f46; border: 1px solid #e5e7eb; border-radius: 0.375rem; - width: 12.5rem; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; @@ -5017,6 +8970,16 @@ background: #ffffff; border: 0 none; box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-radius: 0.375rem; + } + .p-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #3f3f46; @@ -5053,7 +9016,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: #18181B; - background: #e5e7eb; + background: #f4f4f5; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #18181B; @@ -5061,6 +9024,16 @@ .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-focus > .p-menuitem-content:hover { + color: #18181B; + background: #f4f4f5; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text { + color: #18181B; + } + .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { + color: #71717A; + } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { color: #18181B; background: #f4f4f5; @@ -5083,6 +9056,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5135,6 +9128,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 0.375rem; @@ -5148,6 +9190,7 @@ border-radius: 50%; background: transparent; transition: none; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5218,6 +9261,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5252,6 +9368,7 @@ border-radius: 50%; background: transparent; transition: none; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5302,6 +9419,290 @@ color: #DC2626; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5403,6 +9804,9 @@ background: rgba(255, 255, 255, 0.1); color: #fafafa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5413,6 +9817,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5459,6 +9937,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #e5e7eb; border-radius: 0.375rem; @@ -5484,6 +10001,39 @@ border: 2px solid #ffffff; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #4F46E5; color: #ffffff; @@ -5526,6 +10076,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 0.375rem; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #e5e7eb; color: #3f3f46; @@ -5550,6 +10138,7 @@ margin-left: 0.5rem; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5560,10 +10149,29 @@ outline: 0 none; } + .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 .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: #f4f4f5; @@ -5575,6 +10183,210 @@ box-shadow: 0 0 0 1px #6366F1; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #e5e7eb; + border-radius: 0.375rem; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4F46E5; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #4F46E5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5591,6 +10403,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5636,6 +10474,67 @@ stroke: #D97706; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5658,6 +10557,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: #f4f4f5; border-radius: 0.375rem; @@ -5666,6 +10597,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #4F46E5; color: #ffffff; @@ -5691,14 +10638,39 @@ color: #ffffff; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #ffffff; color: #3f3f46; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 2662b84..51d169e 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(100, 181, 246, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #304562; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64B5F6; background: #64B5F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #64B5F6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #64B5F6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #64B5F6; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #43a5f4; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #64B5F6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64B5F6; background: #64B5F6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #64B5F6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #64B5F6; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #304562; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #64B5F6; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } .p-slider .p-slider-range { background: #64B5F6; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #64B5F6; border-color: #64B5F6; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #64B5F6; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .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; @@ -1684,53 +3004,152 @@ background-color: #304562; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #64B5F6; - border-color: #64B5F6; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #43a5f4; - border-color: #43a5f4; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #64B5F6; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #43a5f4; color: #212529; border-color: #43a5f4; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #2396f2; color: #212529; border-color: #2396f2; @@ -1755,12 +3175,12 @@ color: #64B5F6; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 181, 246, 0.16); color: #64B5F6; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #64B5F6; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(100, 181, 246, 0.16); color: #64B5F6; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #64B5F6; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #64B5F6; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #17212f; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 181, 246, 0.04); - color: #64B5F6; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(100, 181, 246, 0.04); - color: #64B5F6; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #253144; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #304562; + border-top: 1px solid #304562; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #304562; + border-left: 1px solid #304562; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #304562; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -4023,6 +6957,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #2396f2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #304562; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #304562; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1f2d40; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #64B5F6; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1f2d40; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #64B5F6; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64B5F6; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #64B5F6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #64B5F6; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 5ac24df..1ae038d 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(129, 199, 132, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #304562; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81C784; background: #81C784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #81C784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81C784; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #81C784; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #6abd6e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #81C784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81C784; background: #81C784; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #81C784; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #81C784; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #304562; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #81C784; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } .p-slider .p-slider-range { background: #81C784; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #81C784; border-color: #81C784; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #81C784; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .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; @@ -1684,53 +3004,152 @@ background-color: #304562; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #81C784; - border-color: #81C784; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #6abd6e; - border-color: #6abd6e; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #81C784; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #6abd6e; color: #212529; border-color: #6abd6e; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #54b358; color: #212529; border-color: #54b358; @@ -1755,12 +3175,12 @@ color: #81C784; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 199, 132, 0.16); color: #81C784; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #81C784; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(129, 199, 132, 0.16); color: #81C784; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #81C784; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #81C784; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #17212f; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 199, 132, 0.04); - color: #81C784; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 199, 132, 0.04); - color: #81C784; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #253144; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #304562; + border-top: 1px solid #304562; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #304562; + border-left: 1px solid #304562; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #304562; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -4023,6 +6957,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #54b358; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #304562; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #304562; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1f2d40; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #81C784; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1f2d40; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #81C784; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81C784; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #81C784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #81C784; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 5a610de..df02ea0 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(255, 213, 79, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #304562; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #FFD54F; background: #FFD54F; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #FFD54F; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #FFD54F; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #FFD54F; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #ffcd2e; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #FFD54F; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #FFD54F; background: #FFD54F; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #212529; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #FFD54F; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #FFD54F; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #304562; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #FFD54F; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } .p-slider .p-slider-range { background: #FFD54F; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #FFD54F; border-color: #FFD54F; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #FFD54F; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .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; @@ -1684,53 +3004,152 @@ background-color: #304562; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #FFD54F; - border-color: #FFD54F; - color: #212529; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #ffcd2e; - border-color: #ffcd2e; - color: #212529; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #212529; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #212529; background: #FFD54F; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #ffcd2e; color: #212529; border-color: #ffcd2e; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #ffc50c; color: #212529; border-color: #ffc50c; @@ -1755,12 +3175,12 @@ color: #FFD54F; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 213, 79, 0.16); color: #FFD54F; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #FFD54F; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(255, 213, 79, 0.16); color: #FFD54F; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #FFD54F; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #FFD54F; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #17212f; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 213, 79, 0.04); - color: #FFD54F; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 213, 79, 0.04); - color: #FFD54F; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #253144; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #304562; + border-top: 1px solid #304562; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #304562; + border-left: 1px solid #304562; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #304562; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #212529; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -4023,6 +6957,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #ffc50c; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #304562; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #304562; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1f2d40; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #FFD54F; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1f2d40; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #FFD54F; color: #212529; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #FFD54F; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #FFD54F; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #FFD54F; color: #212529; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 22831a6..095ac24 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -271,6 +271,126 @@ } @layer primevue { + .p-component, .p-component * { + box-sizing: border-box; + } + + .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-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; + } + + .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 vue overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.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 0.1s linear; + } + + /* Vue based overlay animations */ + .p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-leave-to { + opacity: 0; + } + + .p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-leave-active { + transition: opacity 0.1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; + } + + .p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; + } + + .p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; + } + * { box-sizing: border-box; } @@ -313,6 +433,7 @@ font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; border-radius: 3px; + outline-color: transparent; } .p-link:focus-visible { outline: 0 none; @@ -345,6 +466,102 @@ } } + .p-autocomplete { + display: inline-flex; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.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; + overflow: auto; + 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 .p-autocomplete-loader { right: 0.5rem; } @@ -363,6 +580,7 @@ .p-autocomplete .p-autocomplete-multiple-container { padding: 0.25rem 0.5rem; gap: 0.5rem; + outline-color: transparent; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.25rem 0; @@ -411,6 +629,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child { + margin-top: 0; + } + .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:last-child { + margin-bottom: 0; + } .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); @@ -419,10 +643,6 @@ background: rgba(186, 104, 200, 0.24); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); - } - .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -434,6 +654,156 @@ font-weight: 600; } + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar .p-datepicker-trigger-icon { + cursor: pointer; + } + + /* 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; + } + + .p-datepicker-inline { + display: inline-block; + 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; + } + + /* 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; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + 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 { + min-width: 80vw; + } + .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -478,6 +848,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { @@ -528,6 +899,7 @@ border-radius: 50%; transition: box-shadow 0.2s; border: 1px solid transparent; + outline-color: transparent; } .p-datepicker table td > span.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -566,6 +938,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-datepicker .p-timepicker button:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -627,6 +1000,13 @@ .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; } + .p-datepicker.p-datepicker-mobile table th, +.p-datepicker.p-datepicker-mobile table td { + padding: 0; + } + .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); } @@ -635,6 +1015,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -643,6 +1026,9 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled) { + outline-color: transparent; + } .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); } @@ -652,16 +1038,102 @@ 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 { + display: inline-flex; + cursor: pointer; + 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 { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } + + .p-cascadeselect-enter-from, +.p-cascadeselect-leave-active { + opacity: 0; + } + + .p-cascadeselect-enter-active { + transition: opacity 150ms; + } + .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; @@ -672,6 +1144,15 @@ 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; @@ -713,6 +1194,12 @@ 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); @@ -721,10 +1208,6 @@ 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.09); - } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } @@ -735,20 +1218,42 @@ font-size: 0.875rem; } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + + .p-checkbox-input { + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .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; + border: 2px solid #304562; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -757,6 +1262,7 @@ 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; @@ -767,41 +1273,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #BA68C8; background: #BA68C8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: #BA68C8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .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-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #BA68C8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .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-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox: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; } @@ -813,6 +1377,7 @@ } .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; @@ -843,6 +1408,14 @@ border-color: #ef9a9a; } + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(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); + } + .p-colorpicker-preview { width: 2rem; height: 2rem; @@ -861,11 +1434,107 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 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; @@ -876,6 +1545,18 @@ 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; } @@ -941,6 +1622,12 @@ 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); @@ -949,13 +1636,14 @@ 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.09); - } - .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.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; @@ -969,17 +1657,97 @@ background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; + .p-float-label { + display: block; + position: relative; } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; + + .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-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; + + .p-float-label:has(textarea) label { + top: 1rem; } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; + + .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: -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-icon-field { + position: relative; + } + + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .p-inputotp-input { + text-align: center; + width: 2rem; + } + + .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%; } .p-inputgroup-addon { @@ -1052,18 +1820,182 @@ width: 2.357rem; } + .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-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%; + } + .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + .p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-input { + 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 { + 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-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); @@ -1074,30 +2006,32 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .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.p-focus .p-inputswitch-slider { + .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:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #BA68C8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #b052c0; - } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-fluid .p-inputtext { + width: 100%; + } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1109,6 +2043,7 @@ 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; @@ -1122,6 +2057,15 @@ .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; @@ -1141,27 +2085,15 @@ color: #ef9a9a; } - .p-input-icon-left > svg:first-of-type, -.p-input-icon-left > i:first-of-type { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > svg:last-of-type, -.p-input-icon-right > i:last-of-type { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } @@ -1201,12 +2133,68 @@ padding: 0.625rem 0.625rem; } + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } + + @keyframes dash-frame { + 100% { + stroke-dashoffset: 0; + } + } + .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; @@ -1236,6 +2224,12 @@ 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); @@ -1257,12 +2251,16 @@ } .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.09); + 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; @@ -1273,11 +2271,118 @@ border-color: #ef9a9a; } + .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; @@ -1288,6 +2393,15 @@ 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; @@ -1355,6 +2469,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -1378,6 +2493,12 @@ 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); @@ -1386,10 +2507,6 @@ 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.09); - } - .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.03); } @@ -1409,14 +2526,31 @@ background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; + .p-password { + display: inline-flex; } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; + + .p-password .p-password-panel { + min-width: 100%; } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; + + .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-invalid.p-component > .p-inputtext { @@ -1445,10 +2579,55 @@ 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; @@ -1457,15 +2636,7 @@ 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; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #BA68C8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1473,38 +2644,78 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #BA68C8; background: #BA68C8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; - color: #ffffff; + } + .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:focus { - outline: 0 none; + .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-radiobutton-box:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #BA68C8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .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; @@ -1521,7 +2732,6 @@ outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #BA68C8; @@ -1574,6 +2784,44 @@ border-color: #ef9a9a; } + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + 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%; + } + .p-slider { background: #304562; border: 0 none; @@ -1600,25 +2848,88 @@ border: 2px solid #BA68C8; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-slider .p-slider-handle:focus { + .p-slider .p-slider-handle:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } .p-slider .p-slider-range { background: #BA68C8; + border-radius: 3px; } .p-slider:not(.p-disabled) .p-slider-handle:hover { background: #BA68C8; border-color: #BA68C8; } + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } + + .p-treeselect { + display: inline-flex; + cursor: pointer; + 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-fluid .p-treeselect { + display: flex; + } + .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; + outline-color: transparent; } .p-treeselect:not(.p-disabled):hover { border-color: #BA68C8; @@ -1629,6 +2940,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .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; @@ -1684,53 +3004,152 @@ background-color: #304562; } - .p-togglebutton.p-button { + .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 { + .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-button:not(.p-disabled).p-focus { + .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-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-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, -.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { - background: #BA68C8; - border-color: #BA68C8; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, -.p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover { - background: #b052c0; - border-color: #b052c0; - color: #ffffff; - } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, -.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } + .p-button { + 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-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), .p-button-group .p-button:not(:last-child):hover { + 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:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-button-group .p-button:last-of-type:not(:only-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 { color: #ffffff; background: #BA68C8; @@ -1739,13 +3158,14 @@ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } - .p-button:enabled:hover { + .p-button:not(:disabled):hover { background: #b052c0; color: #ffffff; border-color: #b052c0; } - .p-button:enabled:active { + .p-button:not(:disabled):active { background: #a241b2; color: #ffffff; border-color: #a241b2; @@ -1755,12 +3175,12 @@ color: #BA68C8; border: 1px solid; } - .p-button.p-button-outlined:enabled:hover { + .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:enabled:active { + .p-button.p-button-outlined:not(:disabled):active { background: rgba(186, 104, 200, 0.16); color: #BA68C8; border: 1px solid; @@ -1769,11 +3189,11 @@ color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-outlined.p-button-plain:enabled:hover { + .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:enabled:active { + .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); } @@ -1782,12 +3202,12 @@ color: #BA68C8; border-color: transparent; } - .p-button.p-button-text:enabled:hover { + .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:enabled:active { + .p-button.p-button-text:not(:disabled):active { background: rgba(186, 104, 200, 0.16); color: #BA68C8; border-color: transparent; @@ -1795,15 +3215,15 @@ .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } - .p-button.p-button-text.p-button-plain:enabled:hover { + .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:enabled:active { + .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 { + .p-button:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -1876,302 +3296,302 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909C; border: 1px solid #78909C; } - .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + .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 { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .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 { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); color: #78909C; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text { + .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 { background-color: transparent; color: #78909C; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909C; } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + .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 { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909C; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button { color: #121212; background: #81D4FA; border: 1px solid #81D4FA; } - .p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover { + .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 { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .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 { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); color: #81D4FA; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text { + .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 { background-color: transparent; color: #81D4FA; border-color: transparent; } - .p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81D4FA; } - .p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + .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 { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81D4FA; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button { color: #121212; background: #C5E1A5; border: 1px solid #C5E1A5; } - .p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover { + .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 { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .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 { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); color: #C5E1A5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text { + .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 { background-color: transparent; color: #C5E1A5; border-color: transparent; } - .p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + .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 { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #C5E1A5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button { color: #121212; background: #FFE082; border: 1px solid #FFE082; } - .p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover { + .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 { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .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 { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); color: #FFE082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text { + .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 { background-color: transparent; color: #FFE082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #FFE082; } - .p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + .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 { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #FFE082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button { color: #121212; background: #CE93D8; border: 1px solid #CE93D8; } - .p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover { + .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 { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .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 { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); color: #CE93D8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text { + .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 { background-color: transparent; color: #CE93D8; border-color: transparent; } - .p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #CE93D8; } - .p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + .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 { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #CE93D8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button { color: #121212; background: #F48FB1; border: 1px solid #F48FB1; } - .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover { + .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 { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + .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 { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .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 { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined { + .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 { background-color: transparent; color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text { + .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 { background-color: transparent; color: #F48FB1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + .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 { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } - .p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + .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 { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; @@ -2182,25 +3602,102 @@ background: transparent; border: transparent; } - .p-button.p-button-link:enabled:hover { + .p-button.p-button-link:not(:disabled):hover { background: transparent; color: #BA68C8; border-color: transparent; } - .p-button.p-button-link:enabled:hover .p-button-label { + .p-button.p-button-link:not(:disabled):hover .p-button-label { text-decoration: underline; } - .p-button.p-button-link:enabled:focus { + .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:enabled:active { + .p-button.p-button-link:not(:disabled):active { background: transparent; color: #BA68C8; border-color: transparent; } + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + 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; + z-index: 2; + } + + .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; + } + + .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-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2228,6 +3725,8 @@ height: 3rem; background: rgba(255, 255, 255, 0.87); color: #17212f; + outline-color: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-speeddial-action:hover { background: rgba(255, 255, 255, 0.6); @@ -2280,263 +3779,120 @@ border-radius: 3px; } + .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; + } + .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:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(186, 104, 200, 0.04); - color: #BA68C8; - } - .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(186, 104, 200, 0.04); - color: #BA68C8; - border-color: transparent; - } - .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-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-button-lg > .p-button .p-icon { - width: 1.25rem; - height: 1.25rem; + .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-secondary.p-button-outlined > .p-button { - background-color: transparent; - color: #78909C; - border: 1px solid; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(120, 144, 156, 0.04); - border-color: transparent; - color: #78909C; - } - .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(120, 144, 156, 0.16); - border-color: transparent; - color: #78909C; + .p-carousel { + display: flex; + flex-direction: column; } - .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:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(129, 212, 250, 0.04); - border-color: transparent; - color: #81D4FA; - } - .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(129, 212, 250, 0.16); - border-color: transparent; - color: #81D4FA; + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; } - .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:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(197, 225, 165, 0.04); - border-color: transparent; - color: #C5E1A5; - } - .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(197, 225, 165, 0.16); - border-color: transparent; - color: #C5E1A5; + .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-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:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(255, 224, 130, 0.04); - border-color: transparent; - color: #FFE082; - } - .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(255, 224, 130, 0.16); - border-color: transparent; - color: #FFE082; + .p-carousel-container { + display: flex; + flex-direction: row; } - .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:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(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:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(206, 147, 216, 0.04); - border-color: transparent; - color: #CE93D8; - } - .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(206, 147, 216, 0.16); - border-color: transparent; - color: #CE93D8; + .p-carousel-items-content { + overflow: hidden; + width: 100%; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button { - background-color: transparent; - color: #F48FB1; - border: 1px solid; + .p-carousel-items-container { + display: flex; + flex-direction: row; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - color: #F48FB1; + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } - .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - color: #F48FB1; + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; } - .p-splitbutton.p-button-danger.p-button-text > .p-button { - background-color: transparent; - color: #F48FB1; - border-color: transparent; + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { - background: rgba(244, 143, 177, 0.04); - border-color: transparent; - color: #F48FB1; + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; } - .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { - background: rgba(244, 143, 177, 0.16); - border-color: transparent; - color: #F48FB1; + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; } .p-carousel .p-carousel-content .p-carousel-prev, @@ -2548,6 +3904,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, @@ -2584,6 +3941,241 @@ color: rgba(255, 255, 255, 0.87); } + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .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-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + 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-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 !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2687,6 +4279,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .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, @@ -2718,6 +4311,10 @@ 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); } @@ -2797,17 +4394,17 @@ .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:nth-child(even) { + .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { background: #253144; } - .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + .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:nth-child(even).p-highlight .p-row-toggler { + .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:nth-child(even).p-highlight .p-row-toggler:hover { + .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-sm .p-datatable-header { @@ -2863,10 +4460,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -2891,6 +4484,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-menu-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2919,6 +4513,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-column-filter-clear-button:hover { color: rgba(255, 255, 255, 0.87); @@ -2951,6 +4546,12 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child { + margin-top: 0; + } + .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:last-child { + margin-bottom: 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); @@ -2998,31 +4599,76 @@ padding: 1rem; } + .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.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-controls { padding: 1rem; } .p-orderlist .p-orderlist-controls .p-button { margin-bottom: 0.5rem; } - .p-orderlist .p-orderlist-header { + .p-orderlist .p-orderlist-list-container { 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-orderlist .p-orderlist-list-container.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-orderlist .p-orderlist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; margin: 0; @@ -3031,13 +4677,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-orderlist .p-orderlist-list .p-orderlist-item:first-child { + margin-top: 0; + } + .p-orderlist .p-orderlist-list .p-orderlist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3053,6 +4709,59 @@ background: rgba(255, 255, 255, 0.03); } + .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 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.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: 0.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; + } + .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); @@ -3085,6 +4794,7 @@ background: inherit; color: inherit; border-radius: 50%; + outline-color: transparent; } .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { outline: 0 none; @@ -3092,6 +4802,46 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator-default { + display: flex; + } + + .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; + } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3174,31 +4924,72 @@ color: rgba(255, 255, 255, 0.87); } + .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-picklist-flip-enter-active.p-picklist-flip-enter-to, +.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none; + } + .p-picklist .p-picklist-buttons { padding: 1rem; } .p-picklist .p-picklist-buttons .p-button { margin-bottom: 0.5rem; } - .p-picklist .p-picklist-header { + .p-picklist .p-picklist-list-wrapper { 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-picklist .p-picklist-list-wrapper.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-picklist .p-picklist-header { + color: rgba(255, 255, 255, 0.87); padding: 1rem; font-weight: 600; - border-bottom: 0 none; - border-top-right-radius: 3px; - border-top-left-radius: 3px; } .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:not(:first-child) { + border-top: 1px solid #304562; + } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; margin: 0; @@ -3207,13 +4998,23 @@ background: transparent; transition: transform 0.2s, box-shadow 0.2s; } + .p-picklist .p-picklist-list .p-picklist-item:first-child { + margin-top: 0; + } + .p-picklist .p-picklist-list .p-picklist-item:last-child { + margin-bottom: 0; + } .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:not(.p-highlight):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.09); + background: rgba(255, 255, 255, 0.03); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); @@ -3229,6 +5030,117 @@ background: rgba(255, 255, 255, 0.03); } + .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; + } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3254,6 +5166,88 @@ height: 2px; } + .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-tree-wrapper { + overflow: auto; + } + + .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-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; + } + + .p-tree-flex-scrollable .p-tree-wrapper { + flex: 1; + } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3284,6 +5278,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3302,7 +5297,7 @@ .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 { + .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 { @@ -3343,6 +5338,175 @@ height: 2rem; } + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, +.p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + 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:not(.p-frozen-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; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, +.p-treetable-scrollable .p-treetable-tbody, +.p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, +.p-treetable-scrollable .p-treetable-tbody > tr, +.p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, +.p-treetable-scrollable .p-treetable-tbody > tr > td, +.p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, +.p-treetable-scrollable-both .p-treetable-tbody > tr > td, +.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, +.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3435,6 +5599,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { @@ -3450,7 +5615,7 @@ .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 { + .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 { @@ -3540,6 +5705,23 @@ padding: 1.25rem 1.25rem; } + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3548,6 +5730,7 @@ font-weight: 600; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { margin-right: 0.5rem; @@ -3640,6 +5823,25 @@ padding: 1rem 0 0 0; } + .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; + } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -3663,6 +5865,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { margin-right: 0.5rem; @@ -3684,6 +5887,62 @@ padding: 1rem; } + .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-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.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + .p-divider.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + .p-divider.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + .p-divider.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + .p-divider.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + .p-divider.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3692,7 +5951,7 @@ padding: 0 1rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px #304562; + border-top: 1px solid #304562; } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3702,12 +5961,32 @@ padding: 1rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px #304562; + border-left: 1px solid #304562; } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .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; + } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -3727,6 +6006,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); @@ -3762,10 +6042,67 @@ border-top: 0 none; } + .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; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .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; + } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-scrollpanel .p-scrollpanel-bar:focus-visible { outline: 0 none; @@ -3773,6 +6110,66 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .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%; + } + + .p-splitter-panel { + flex-grow: 1; + overflow: hidden; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -3786,6 +6183,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3796,6 +6194,244 @@ background: #304562; } + .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; + } + .p-stepper-header:last-of-type { + flex: initial; + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + } + .p-stepper-header .p-stepper-action:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + + .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 { + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } + + .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-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; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + 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-header-action:focus { + 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; @@ -3816,6 +6452,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { outline: 0 none; @@ -3838,6 +6475,7 @@ 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; + outline-color: transparent; } .p-tabview .p-tabview-nav-btn.p-link:focus-visible { outline: 0 none; @@ -3853,6 +6491,26 @@ border-bottom-left-radius: 3px; } + .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; + } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -3864,6 +6522,76 @@ margin: 0 0.5rem; } + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: -10px; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .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; + } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3886,12 +6614,12 @@ margin: 0; } .p-confirm-popup:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-confirm-popup:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -3912,6 +6640,143 @@ margin-left: 1rem; } + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); + } + + /* 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: 0.75rem; + transform: translate3d(0px, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); + } + + /* Maximize */ + .p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + .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); @@ -3937,6 +6802,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; margin-right: 0.5rem; } .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { @@ -3966,14 +6832,12 @@ background: #1f2d40; color: rgba(255, 255, 255, 0.87); padding: 0 1.5rem 1.5rem 1.5rem; - text-align: right; + display: flex; + justify-content: flex-end; + gap: 0.5rem; 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-confirm-dialog .p-confirm-dialog-icon { font-size: 2rem; } @@ -3981,6 +6845,76 @@ margin-left: 1rem; } + .p-overlaypanel { + margin-top: 10px; + } + + .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-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.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; + } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4007,12 +6941,12 @@ color: #ffffff; } .p-overlaypanel:after { - border: solid transparent; + border-style: solid; border-color: rgba(31, 45, 64, 0); border-bottom-color: #1f2d40; } .p-overlaypanel:before { - border: solid transparent; + border-style: solid; border-color: rgba(48, 69, 98, 0); border-bottom-color: #2e425d; } @@ -4023,6 +6957,159 @@ border-top-color: #304562; } + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + 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 !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, +.p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + + .p-sidebar-right .p-sidebar-enter-from, +.p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + + .p-sidebar-top .p-sidebar-enter-from, +.p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + + .p-sidebar-bottom .p-sidebar-enter-from, +.p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + + .p-sidebar-full .p-sidebar-enter-from, +.p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + + .p-sidebar-full .p-sidebar-enter-active, +.p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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-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; + } + } .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4032,6 +7119,10 @@ .p-sidebar .p-sidebar-header { padding: 1rem; } + .p-sidebar .p-sidebar-header .p-sidebar-header-content { + font-weight: 600; + font-size: 1.25rem; + } .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; @@ -4041,6 +7132,7 @@ background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { @@ -4061,6 +7153,61 @@ padding: 1rem; } + .p-tooltip { + position: absolute; + display: none; + padding: 0.25em 0.5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, +.p-tooltip.p-tooltip-left { + padding: 0 0.25rem; + } + + .p-tooltip.p-tooltip-top, +.p-tooltip.p-tooltip-bottom { + padding: 0.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; + scale: 2; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + } + + .p-tooltip.p-tooltip-top { + padding: 0.25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; + } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4081,6 +7228,50 @@ border-bottom-color: #304562; } + .p-fileupload-content { + position: relative; + } + + .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-fileupload > input[type=file], +.p-fileupload-basic input[type=file] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4145,6 +7336,38 @@ border-color: #a241b2; } + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + 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; + } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4154,6 +7377,7 @@ .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link { transition: box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { outline: 0 none; @@ -4177,6 +7401,48 @@ color: rgba(255, 255, 255, 0.6); } + .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-from, +.p-contextmenu-leave-active { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4184,7 +7450,7 @@ 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; + min-width: 12.5rem; } .p-contextmenu .p-contextmenu-root-list { outline: 0 none; @@ -4196,6 +7462,15 @@ box-shadow: 0 2px 4px -1px rgba(0, 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 { + margin: 0; + } + .p-contextmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-contextmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4231,7 +7506,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4239,6 +7514,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4261,6 +7546,112 @@ height: 0.875rem; } + .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; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); + } + + .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-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .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-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4309,27 +7700,186 @@ .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } - - @media screen and (max-width: 960px) { - .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; - } - .p-dock.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; - } - .p-dock.p-dock-left .p-dock-list-container, .p-dock.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; - } - .p-dock.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; - } - .p-dock .p-dock-list .p-dock-item { - transform: none; - margin: 0; - } + .p-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-megamenu { + display: flex; + position: relative; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .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; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + } + + .p-megamenu-panel:not(.p-megamenu-mobile) { + position: absolute; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: 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-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) { + display: inline-flex; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical:not(.p-megamenu-mobile) .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.p-megamenu-mobile .p-megamenu-button { + display: flex; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-megamenu.p-megamenu-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + + .p-megamenu.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; + } + .p-megamenu { padding: 0.5rem; background: #1f2d40; @@ -4340,6 +7890,15 @@ .p-megamenu .p-megamenu-root-list { outline: 0 none; } + .p-megamenu .p-menuitem { + margin: 0; + } + .p-megamenu .p-menuitem:first-child { + margin-top: 0; + } + .p-megamenu .p-menuitem:last-child { + margin-bottom: 0; + } .p-megamenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4375,7 +7934,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4383,6 +7942,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4398,6 +7967,7 @@ 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-megamenu .p-submenu-header { margin: 0; @@ -4410,14 +7980,14 @@ } .p-megamenu .p-submenu-list { padding: 0.25rem 0; - width: 12.5rem; + min-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; + min-width: 12.5rem; padding: 0.25rem 0; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content { @@ -4450,6 +8020,76 @@ .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.p-megamenu-vertical { + width: 100%; + padding: 0.5rem; + } + .p-megamenu.p-megamenu-mobile .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; + outline-color: transparent; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-megamenu.p-megamenu-mobile .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 .p-megamenu-root-list .p-menuitem-separator { + border-top: 1px solid #304562; + margin: 0.25rem 0; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + + .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; + } .p-menu { padding: 0.25rem 0; @@ -4457,7 +8097,16 @@ color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; - width: 12.5rem; + min-width: 12.5rem; + } + .p-menu .p-menuitem { + margin: 0; + } + .p-menu .p-menuitem:first-child { + margin-top: 0; + } + .p-menu .p-menuitem:last-child { + margin-bottom: 0; } .p-menu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -4494,7 +8143,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4502,6 +8151,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4531,6 +8190,112 @@ margin: 0.25rem 0; } + .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: 1; + } + + .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; + } + + .p-menubar.p-menubar-mobile { + position: relative; + } + + .p-menubar.p-menubar-mobile .p-menubar-button { + display: flex; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + } + + .p-menubar.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4571,6 +8336,15 @@ .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 { + margin: 0; + } + .p-menubar .p-menuitem:first-child { + margin-top: 0; + } + .p-menubar .p-menuitem:last-child { + margin-bottom: 0; + } .p-menubar .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4606,7 +8380,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -4614,6 +8388,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4629,7 +8413,8 @@ 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; + min-width: 12.5rem; + border-radius: 3px; } .p-menubar .p-submenu-list .p-menuitem-separator { border-top: 1px solid #304562; @@ -4638,95 +8423,99 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } - - @media screen and (max-width: 960px) { - .p-menubar { - position: relative; - } - .p-menubar .p-menubar-button { - display: flex; - width: 2rem; - height: 2rem; - color: 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-menuitem-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-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; - transition: transform 0.2s; - } - .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-180deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - transform: rotate(-90deg); - } - .p-menubar .p-menubar-root-list .p-menuitem { - width: 100%; - position: static; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 2.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 3.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 5.25rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 6.75rem; - } - .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { - padding-left: 8.25rem; - } - .p-menubar.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - } + .p-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; + outline-color: transparent; } + .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 .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 2.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 3.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 5.25rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 6.75rem; + } + .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link { + padding-left: 8.25rem; + } + + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action: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; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } + .p-panelmenu .p-panelmenu-header { outline: 0 none; } @@ -4736,6 +8525,7 @@ background: #1f2d40; border-radius: 3px; transition: box-shadow 0.2s; + outline-color: transparent; } .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action { color: rgba(255, 255, 255, 0.87); @@ -4785,6 +8575,15 @@ .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list { outline: 0 none; } + .p-panelmenu .p-panelmenu-content .p-menuitem { + margin: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:first-child { + margin-top: 0; + } + .p-panelmenu .p-panelmenu-content .p-menuitem:last-child { + margin-bottom: 0; + } .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; @@ -4820,7 +8619,7 @@ } .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); + 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 .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4828,6 +8627,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -4876,11 +8685,65 @@ border-bottom-left-radius: 3px; } + .p-steps { + position: relative; + } + + .p-steps .p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + cursor: pointer; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; + outline-color: transparent; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); @@ -4921,6 +8784,46 @@ margin-top: -1rem; } + .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; + } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -4941,6 +8844,7 @@ border-top-left-radius: 3px; transition: box-shadow 0.2s; margin: 0 0 -2px 0; + outline-color: transparent; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { margin-right: 0.5rem; @@ -4961,13 +8865,62 @@ color: #BA68C8; } + .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-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; + } + + .p-tieredmenu-enter-active { + transition: opacity 250ms; + } + .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; + min-width: 12.5rem; } .p-tieredmenu.p-tieredmenu-overlay { background: #1f2d40; @@ -4982,6 +8935,16 @@ 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-tieredmenu .p-menuitem { + margin: 0; + } + .p-tieredmenu .p-menuitem:first-child { + margin-top: 0; + } + .p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); @@ -5018,7 +8981,7 @@ } .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); + background: rgba(255, 255, 255, 0.03); } .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); @@ -5026,6 +8989,16 @@ .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-focus > .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-focus > .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-focus > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content:hover .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); @@ -5048,6 +9021,26 @@ height: 0.875rem; } + .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; + } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5100,6 +9093,55 @@ margin-right: 0; } + .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; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter-from { + opacity: 0; + } + + .p-message-enter-active { + transition: opacity 0.3s; + } + + .p-message.p-message-leave-from { + max-height: 1000px; + } + + .p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5113,6 +9155,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5183,6 +9226,79 @@ height: 1.5rem; } + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .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-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-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + transform: translateY(50%); + } + + .p-toast-message-leave-from { + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; + } + + .p-toast-message-enter-active { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } + .p-toast { opacity: 0.9; } @@ -5217,6 +9333,7 @@ border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.5); @@ -5267,6 +9384,290 @@ color: #73000c; } + .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: -0.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 0.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: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.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; + } + + .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: -0.5rem; + } + + /* Animation */ + .p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); + } + + .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; + } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5368,6 +9769,9 @@ background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } + .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + outline-color: transparent; + } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { outline: 0 none; outline-offset: 0; @@ -5378,6 +9782,80 @@ --maskbg: rgba(0, 0, 0, 0.9); } + .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 0.3s; + border: none; + padding: 0; + } + + .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-action.p-disabled { + pointer-events: auto; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + .p-image-preview-enter-from, +.p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } @@ -5424,6 +9902,45 @@ height: 1.5rem; } + .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-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5449,6 +9966,39 @@ border: 2px solid #1f2d40; } + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 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.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5491,6 +10041,44 @@ line-height: 3rem; } + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } + + .p-blockui { + border-radius: 3px; + } + + .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-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -5515,6 +10103,7 @@ margin-left: 0.5rem; border-radius: 3px; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-chip .p-chip-remove-icon:focus-visible { outline: 0 none; @@ -5525,10 +10114,29 @@ outline: 0 none; } + .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 .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; + outline-color: transparent; } .p-inplace .p-inplace-display:not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -5540,6 +10148,210 @@ box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup { + display: flex; + } + + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + } + + .p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-labels { + align-items: start; + } + + .p-metergroup-labels-vertical { + flex-direction: column; + } + + .p-metergroup-label { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-marker { + display: inline-flex; + } + + .p-metergroup { + gap: 1rem; + } + .p-metergroup .p-metergroup-meters { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #BA68C8; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-marker { + background: #BA68C8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + } + .p-metergroup .p-metergroup-labels .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical { + gap: 0.5rem; + } + .p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal { + gap: 1rem; + } + .p-metergroup.p-metergroup-horizontal { + flex-direction: column; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meters { + 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-vertical { + flex-direction: row; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meters { + 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-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%; + } + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -5556,6 +10368,32 @@ line-height: 1.5rem; } + .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 { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + .p-progress-spinner-svg { animation: p-progress-spinner-rotate 2s linear infinite; } @@ -5601,6 +10439,67 @@ stroke: #6d5100; } } + .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); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none; + } + + @keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } + } + .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-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } + .p-scrolltop { width: 3rem; height: 3rem; @@ -5623,6 +10522,38 @@ height: 1.5rem; } + .p-skeleton { + 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.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } + } .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -5631,6 +10562,22 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .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; + } + .p-tag { background: #BA68C8; color: #ffffff; @@ -5656,14 +10603,39 @@ color: #121212; } .p-tag .p-tag-icon { - margin-right: 0.25rem; font-size: 0.75rem; } + .p-tag .p-tag-icon:not(:last-child) { + margin-right: 0.25rem; + } .p-tag .p-tag-icon.p-icon { width: 0.75rem; height: 0.75rem; } + .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; + } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87);